<div class="container">
<details open>
<summary>FAQ 1</summary>
<div class="description">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam
impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!
</p>
</div>
</details>
<details>
<summary>FAQ 2</summary>
<div class="description">
<p>Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in
accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque
voluptates consequatur. </p>
</div>
</details>
<details>
<summary>FAQ 3</summary>
<div class="description">
<p>Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi,
minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi
sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!</p>
</div>
</details>
</div>
<div class="container">
<details open>
<summary>FAQ 1</summary>
<div class="description">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam
impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!
</p>
</div>
</details>
<details>
<summary>FAQ 2</summary>
<div class="description">
<p>Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in
accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque
voluptates consequatur. </p>
</div>
</details>
<details>
<summary>FAQ 3</summary>
<div class="description">
<p>Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi,
minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi
sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!</p>
</div>
</details>
</div>
/* No context defined. */
.container {
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
summary {
background-color: var(--oklch-color-black);
color: var(--oklch-color-white);
padding: 1.2rem;
margin-block-end: 1.2rem;
border-radius: 0.5rem;
cursor: pointer;
font-size: 1.5em;
font-weight: 600;
}
.accordion--item {
margin-block-end: 1.5em;
}
.accordion--item:first-child {
margin-block-start: 2em;
}
.accordion--item:last-child {
margin-block-end: 2em;
}
.accordion--title {
cursor: pointer;
user-select: none;
background-color: var(--oklch-color-stone);
color: var(--oklch-color-white);
background-image: url(https://assets.codepen.io/32795/remove.svg), linear-gradient(transparent, transparent);
background-repeat: no-repeat;
background-position: right 1.25rem center;
background-size: 1.5rem;
border-radius: 15px;
font-weight: 700;
padding: 1rem 3.5rem 1rem 1.25rem;
}
.accordion--content {
margin-block-start: 1em;
margin-inline: 2em;
}
.accordion--title + .accordion--content {
display: none;
}
.accordion--title.is-open + .accordion--content {
display: block;
}
.accordion--content-bordered {
margin-inline-start: 0;
}
.accordion--title + .accordion--content-bordered {
display: none;
}
.accordion--title.is-open + .accordion--content-bordered {
display: block;
}
.accordion--content-bordered {
border-bottom: 0.5rem solid lch(48.64% 16.94 244.34);
border-left: 0.5rem solid lch(48.64% 16.94 244.34);
border-right: 0.5rem solid lch(48.64% 16.94 244.34);
padding: 1em;
}
Still working on a multiselect variant that will allow you to keep multiple tabs open.
Needs to consider accessibility.
code adapted from How to build an accordion with JavaScript