I've long been a fan of the Bootstrap UI framework for my admin user interfaces. It puts a library of pre-built visual "components" at my disposal so I don't have to think too much about the HTML, CSS and javascript needed to make my customer dashboards consistent and easy to use.

One such component is the "accordion", so named because, like the musical instrument, it expands and contracts. This is useful for presenting a list of short summary items, and allowing each to be opened up to reveal more detail.

With Bootstrap available to the page, the HTML code to generate this is relatively straightforward and will trigger the appropriate CSS and javascript.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>This is the first item's accordion body.</p> 
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>This is the second item's accordion body.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>This is the third item's accordion body.</p>
      </div>
    </div>
  </div>
</div>

Details/Summary

But with modern web browsers, we no longer need CSS and javascript to achieve the same basic functionality. We can just use the <details> and <summary> HTML tags.

<details>
  <summary>
    Accordion Item #1
  </summary>
  <p>This is the first item's accordion body.</p> 
</details>
<details>
  <summary>
    Accordion Item #2
  </summary>
  <p>This is the second item's accordion body.</p>
</details>
<details>
  <summary>
    Accordion Item #3
  </summary>
  <p>This is the third item's accordion body.</p>
</details>

This results in the following functional if rather plain rendering.

To restore the stylistic consistency, we can borrow CSS classes from another Bootstrap component, the Card container.

<details class="card">
  <summary class="card-header">
    Accordion Item #1
  </summary>
  <div class="card-body">
  	<p>This is the first item's accordion body.</p>
  </div>
</details>
<details class="card">
  <summary class="card-header">
    Accordion Item #2
  </summary>
  <div class="card-body">
  	<p>This is the second item's accordion body.</p>
  </div>
</details>
<details class="card">
  <summary class="card-header">
    Accordion Item #3
  </summary>
  <div class="card-body">
  	<p>This is the third item's accordion body.</p>
  </div>
</details>

We now have something that's functionally and visually good enough, but with over 60% fewer lines, far fewer attributes and no javascript.