Author: | Mostafizur Rahman |
---|---|
Views Total: | 16,086 views |
Official Page: | Go to website |
Last Update: | October 28, 2020 |
License: | MIT |
Preview:

Description:
A simple and smooth FAQ accordion component created using CSS and HTML <details> <summary>
elements.
How to use it:
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} }