HTML/CSS Dropdown

<main>
  <style>
    body {
  font-family: Avenir, Helevetica, sans-serif;
  margin: 1rlh 2rlh;
  font-size:0.9rem;
}
details {
  border: 1px solid grey;
  margin-block: 1rlh;
  padding: 1rlh;
  margin-trim: block;
}
details[open] summary {
  margin-block-end: 0.5rlh;
  color: red;
}
h1 {
  font-size: 1.1rem;
  font-weight: 400;
}
main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rlh;
}
code {
  background: #eee;
  padding: 0.2rlh;
  border-radius: 0.2rlh;
}
  </style>

  <section>
    <h1>Without name attributes</h1>
    <details open>
      <summary>Item 1</summary>
      <p>This is a <code>details</code> element, with a summary inside. It has an <code>open</code> attribute. This causes it to be open by default when the page loads, instead of closed.</p>
    </details>
    <details >
      <summary>Item 2</summary>
      <p>This is just like “Item 1” above, except without the <code>open</code> attribute.</p>
    </details>
    <details>
      <summary>Item 3</summary>
      <p>This is a third item.</p>
    </details>
  </section>
  
  <section>
      <button data-action="open">open all</button>
    <h1>With name attributes on each detail</h1>
    <details name="foobar" open>
      <summary>Item 1</summary>
      <p>In this column, all three items are named with the same name, using the <code>name</code> attribute. Which means any time a user clicks to open one item, any open item will automatically close.</p> 
      <p>Also, here the first item has the <code>open</code> attribute applied, so it’s open by default.</p> 
    </details>
    <details name="foobar">
      <summary>Item 2</summary>
      <p>Notice when you clicked this item, any open item automatically closed.</p>
    </details>
    <details name="foobar">
      <summary>Item 3</summary>
      <p>Using the <code>name</code> attribute can make for a better user experience. Users don’t have to manually manage a lot of open items. And developers don’t have to write any JavaScript to get this affect. The browser does the work.</p>
      <p>Take care, however, to make sure this is the best experience given your usecase. Think about users who might want or need to compare one item to another.</p>
    </details>
  </section>
</main>