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.
Click me to see more details #2
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.
Click me to see more details #3
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.
Did you like this HTML code snippet? Share it with your friends:
LAST UPDATED
January 21, 2026