An FAQ (Frequently Asked Questions) section is crucial for any service or business website. It reduces customer support inquiries and helps visitors find answers quickly. However, listing all questions and answers in plain text can make your page look cluttered.
In this post, I am sharing a Pure CSS FAQ Accordion code snippet. It allows you to hide answers and show them only when a user clicks on the question. This "expand/collapse" effect saves huge amounts of space and improves User Experience (UX).
Why use this FAQ Accordion?
- Space Efficient: It keeps your page clean by hiding long answers until they are needed.
- Smooth Animation: Features a gentle sliding animation when opening and closing questions.
- No JavaScript: Built entirely with HTML5
<details>and<summary>tags and CSS. It is lightweight and SEO-friendly. - Easy to Edit: Adding new questions is as simple as copying and pasting a few lines of text.
Live Preview
Click on the questions below to reveal the answers!
Is this code free to use?
Yes! You can copy and paste this code into your personal or commercial projects for free.
Do I need JavaScript?
No, this accordion works using pure CSS and HTML5 semantic tags. It loads very fast.
How do I customize the colors?
You can easily change the background and text colors in the CSS section. Check the guide below for details.
HTML & CSS Code
Copy the code below and paste it into your blog post. It creates a beautiful, styled accordion list.
<style>
.faq-container {
max-width: 600px;
margin: 0 auto;
font-family: sans-serif;
}
details {
background: #ffffff;
margin-bottom: 10px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
overflow: hidden;
border: 1px solid #eee;
transition: 0.3s;
}
details:hover {
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
summary {
padding: 20px;
cursor: pointer;
font-weight: bold;
font-size: 18px;
color: #333;
list-style: none; /* Hide default triangle */
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Custom Plus Icon */
summary::after {
content: '+';
font-size: 24px;
color: #6c5ce7;
font-weight: bold;
transition: 0.3s;
}
/* Rotate Icon when open */
details[open] summary::after {
transform: rotate(45deg);
}
/* Remove default marker in Webkit */
summary::-webkit-details-marker {
display: none;
}
.faq-content {
padding: 0 20px 20px 20px;
color: #666;
line-height: 1.6;
font-size: 16px;
border-top: 1px solid #f9f9f9;
}
details[open] summary {
color: #6c5ce7;
border-bottom: 1px solid #eee;
}
</style>
<!-- FAQ HTML Structure -->
<div class="faq-container">
<!-- Question 1 -->
<details open>
<summary>Is this code free to use?</summary>
<div class="faq-content">
<p>Yes! You can copy and paste this code into your personal or commercial projects for free.</p>
</div>
</details>
<!-- Question 2 -->
<details>
<summary>Do I need JavaScript?</summary>
<div class="faq-content">
<p>No, this accordion works using pure CSS and HTML5 semantic tags. It loads very fast.</p>
</div>
</details>
<!-- Question 3 -->
<details>
<summary>Can I add more questions?</summary>
<div class="faq-content">
<p>Absolutely. Just copy the entire "details" block and paste it below the last one.</p>
</div>
</details>
</div>
How to Customize
You can style this FAQ to match your brand. Here are some quick customization tips:
1. How to Add More Questions
To add another question, simply copy the code block starting from <details> to </details> and paste it at the end of the list inside the container.
2. How to Change Colors
The active color is currently set to Purple (#6c5ce7).
Find the details[open] summary section in the CSS.
Change color: #6c5ce7; to your preferred Hex code (e.g., Blue: #007bff, Orange: #ff9f43).
3. How to Change the Icon
By default, it uses a plus (+) sign that rotates into an X.
Find summary::after in the CSS.
You can change content: '+'; to an arrow '▼' or any other symbol you like.
Conclusion
This CSS FAQ accordion is a simple yet powerful addition to your website. It improves navigation and keeps your content organized. Try adding it to your "About" or "Services" page today!
