HTML

accordion

1
2
3
4
5
6
<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

accordion

<details>
  <summary> Detailed description</summary>
   This is an accordion and you can use buttons here or whatever tag you want.
   ive stylized it a little to make it look more modern
   but the default should be good enough too
</details>

// css

details {
      border: 1px solid #aaa;
      border-radius: 4px;
      padding: 0.5em 0.5em 0;
    }
 
    summary {
      font-weight: bold;
      margin: -0.5em -0.5em 0;
      padding: 0.5em;
    }
 
    details[open] {
      padding: 0.5em;
      transition: all 0.5s;
    }
 
    details[open] summary {
      transition: all 0.5s;
      border-bottom: 1px solid #aaa;
      margin-bottom: 0.5em;
    }
 
    details > summary {
      list-style-type: "+";
      cursor: pointer;
    }
 
    details[open] > summary {
      list-style-type: "-";
      cursor: pointer;
    }