CSS - Change accordion color when open and unchanged when closed-CodePudding

I am trying to create an accordion inspire into this one. I want it to change the color of the text and from the background when the accordion is open, and unchanged when it is closed.

My code is this, and I used :focus to try to achieve my goal. However, the response isn't the expected.

    html {
      font-size: 16px;
      max-width: 100vw;
      background-color: #EEEEEE;
    }

    body {
      padding: 0;
      margin: 0;
    }

    /*accordion*/
    .accordion-wrap {
      box-sizing: border-box;
      font-family: sans-serif;
      display: grid;
      justify-content: center;
      background-color: #EEEEEE;
      padding-top: 30px;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    summary {
      cursor: pointer;
      outline: none;
      font-size: 14px;
      line-height: 1.5;
      vertical-align: bottom;
      background: #cd2c00;
      padding: 2px;
      padding-left: 10px;
      font-family: "Gotham Rnd SSm", "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif;
      text-transform: uppercase;
      color: #FFF;
      border-radius: 80px;
      width: 500px;
      border: 4px solid #cd2c00;
    }

    summary::marker {
      display: none;
    }

    .details--inner {
      background: #EEEEEE;
      padding: 20px;
      padding-top: 0px;
      width: 500px;
    }

    .texto-summary {
      font-size: 14px;
      font-weight: 700;
      font-family: "Gotham Rnd SSm", "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif;
      text-transform: uppercase;
      width: 100%;
      padding-left: 0px;
      transform: translate(-3px, 2px);
    }

    summary:after {
      content: url(https://assets.shared.cloud.nexojornal.com.br/graficos/2022/07/01/setinha-branca.svg);
      line-height: 1.2;
      color: #000;
      float: left;
      font-size: 1.5em;
      font-weight: bold;
      margin: -5px 0px 0 0;
      padding: 0;
      text-align: center;
      width: 20px;
      transform: translate(462px, -34px);
    }

    details[open] summary:after {
      content: url(https://assets.shared.cloud.nexojornal.com.br/graficos/2022/07/01/setinha-verde.svg);
      transform: translate(462px, -34px);
    }

    summary:focus {
      background-color: #ffffff;
      color: #cd2c00;
      border: 4px solid #cd2c00;
      content: url(https://assets.shared.cloud.nexojornal.com.br/graficos/2022/07/01/setinha-verde.svg);
    }

    summary {
      list-style: none
    }

    summary::-webkit-details-marker,
    summary::marker {
      display: none;
    }

    .texto-registros {
      margin-top: 20px;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Summary</title>
  </head>
  
  <body>
  <div >
    <details>
      <summary>
        <p >Lorem ipsum dolor sit amet</p>
      </summary>
      <div  role="textbox">
        <p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
      </div>
    </details>
    </br>
    <details>
      <summary>
        <p >Lorem ipsum dolor sit amet</p>
      </summary>
      <div  role="textbox">
        <p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
      </div>
    </details>
  </div>
  </div>
</body>
</html>

The main problem is that the accordion doesn't change the color when it is closed after being opened. And the little arrow disappear when the accordion is closed.

Can this be achieved with CSS? Or do I need to use JavaScript? Thanks!

CodePudding user response：

Just use details[open] here's a small example

@import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
  height: 100%;
  display: grid;
  place-items: center;
}

details[open] summary {
  color: red;
}

<details>
  <summary>Open Me</summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, provident.</p>
</details>

CodePudding user response：

html {
      font-size: 16px;
      max-width: 100vw;
      background-color: #EEEEEE;
    }

    body {
      padding: 0;
      margin: 0;
    }

    /*accordion*/
    .accordion-wrap {
      box-sizing: border-box;
      font-family: sans-serif;
      display: grid;
      justify-content: center;
      background-color: #EEEEEE;
      padding-top: 30px;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    summary {
      cursor: pointer;
      outline: none;
      font-size: 14px;
      line-height: 1.5;
      vertical-align: bottom;
      background: #cd2c00;
      padding: 2px;
      padding-left: 10px;
      font-family: "Gotham Rnd SSm", "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif;
      text-transform: uppercase;
      color: #FFF;
      border-radius: 80px;
      width: 500px;
      border: 4px solid #cd2c00;
    }

    summary::marker {
      display: none;
    }

    .details--inner {
      background: #EEEEEE;
      padding: 20px;
      padding-top: 0px;
      width: 500px;
    }

    .texto-summary {
      font-size: 14px;
      font-weight: 700;
      font-family: "Gotham Rnd SSm", "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif;
      text-transform: uppercase;
      width: 100%;
      padding-left: 0px;
      transform: translate(-3px, 2px);
    }

    summary:after {
      content: url(https://assets.shared.cloud.nexojornal.com.br/graficos/2022/07/01/setinha-branca.svg);
      line-height: 1.2;
      color: #000;
      float: left;
      font-size: 1.5em;
      font-weight: bold;
      margin: -5px 0px 0 0;
      padding: 0;
      text-align: center;
      width: 20px;
      transform: translate(462px, -34px);
    }

    details[open] summary:after {
      content: url(https://assets.shared.cloud.nexojornal.com.br/graficos/2022/07/01/setinha-verde.svg);
      transform: translate(462px, -34px);
    }

    summary:focus {
      background-color: #ffffff;
      color: #cd2c00;
      border: 4px solid #cd2c00;
      content: url(https://assets.shared.cloud.nexojornal.com.br/graficos/2022/07/01/setinha-verde.svg);
    }

    summary {
      list-style: none
    }

    summary::-webkit-details-marker,
    summary::marker {
      display: none;
    }

    .texto-registros {
      margin-top: 20px;
    }
    
    details[open] summary {
      background: purple;
      color: green;
    }
    
    
     details[open] .details--inner {
      background: purple;
      color: green;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Summary</title>
  </head>
  
  <body>
  <div >
    <details>
      <summary>
        <p >Lorem ipsum dolor sit amet</p>
      </summary>
      <div  role="textbox">
        <p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
      </div>
    </details>
    </br>
    <details>
      <summary>
        <p >Lorem ipsum dolor sit amet</p>
      </summary>
      <div  role="textbox">
        <p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
      </div>
    </details>
  </div>
  </div>
</body>
</html>