<section class="html-accordion">
<h2>Pure html accordion</h2>
<!-- first accordion -->
<details>
<summary>Header</summary>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
neque, velit quasi quos quia nulla omnis! Similique dolorum,
veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
atque vitae quia accusamus.
</p>
</details>
</section>
<section class="html-css-accordion">
<h2>Html accordion with styling</h2>
<!-- first accordion -->
<details>
<summary>Header 1</summary>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
neque, velit quasi quos quia nulla omnis! Similique dolorum,
veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
atque vitae quia accusamus.
</p>
</details>
<!-- second accordion -->
<details>
<summary>Header 2</summary>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
neque, velit quasi quos quia nulla omnis! Similique dolorum,
veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
atque vitae quia accusamus.
</p>
</details>
<!-- third accordion -->
<details>
<summary>Header 3</summary>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
neque, velit quasi quos quia nulla omnis! Similique dolorum,
veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
atque vitae quia accusamus.
</p>
</details>
</section>
/* section wrappers */
.html-accordion,
.html-css-accordion {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* html accordion */
.html-accordion details {
width: 280px;
}
/* css accordion card */
.html-css-accordion details {
width: 280px;
border: double goldenrod;
background-color: white;
}
/* css accordion title */
.html-css-accordion summary {
font-weight: bold;
color: #202020;
position: relative;
padding: 10px;
margin-bottom: 0;
}
/* css accordion body */
.html-css-accordion p {
border-top: solid 1px goldenrod;
padding: 10px;
color: #3d3b3b;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.