A simple and smooth FAQ accordion component created using CSS and HTML <details> <summary>
elements.
1. Add accordion headings (questions) to <summary>
elements and wrap them together with your accordion content (answers) into <details>
elements. The open
attribute is used to determine if the selected accordion panel should open on page load.
<details open>
<summary>FAQ 1</summary>
<div class="faq__content">
<p>Answer 1</p>
</div>
</details>
<details>
<summary>FAQ 2</summary>
<div class="faq__content">
<p>Answer 2</p>
</div>
</details>
<details>
<summary>FAQ 3</summary>
<div class="faq__content">
<p>Answer 3</p>
</div>
</details>
...
2. The primary styles for the FAQ accordion.
summary {
font-size: 1.25rem;
font-weight: 600;
background-color: #fff;
color: #333;
padding: 1rem;
margin-bottom: 1rem;
outline: none;
border-radius: 0.25rem;
text-align: left;
cursor: pointer;
position: relative;
}
details > summary::after {
position: absolute;
content: "+";
right: 20px;
}
details[open] > summary::after {
position: absolute;
content: "-";
right: 20px;
}
details > summary::-webkit-details-marker {
display: none;
}
3. Apply a smooth open animation to the accordion.
details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; margin-top: -10px}
100% {opacity: 1; margin-top: 0px}
}
#html #css #javascript