Multiple Details Tags With Name Attribute

Use the name attribute on multiple <details> tags so only one can be open at a time.

Demo:

HTML

CSS

Preview

           
<div class="details-wrapper">
  <details name="requirements">
    <summary>
      Click me to see more details
    </summary>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
    </p>
  </details>
  
  <details name="requirements">
    <summary>
      Click me to see more details #2
    </summary>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
    </p>
  </details>
  
      <details name="requirements">
    <summary>
      Click me to see more details #3
    </summary>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
    </p>
  </details>
</div>

           
.wrapper {
  padding: 30px;
}

details {
  width: 100%;
  max-width: 500px;
  margin-bottom: 15px;
}

summary {
  background: #f2f2f2;
  cursor: pointer;
  padding: 15px;
}

.details-wrapper p {
  padding: 15px;
  margin: 0;
  background: #f2f2f2;
}

Click me to see more details

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.

Multiple Details Tags With Name Attribute

Demo:

Join the newsletter.