FAQ Accordion Using HTML, CSS & JavaScript – Responsive Web Design
When we create a website, there is a structured way on a page to show common questions and answers. By aligning the questions properly, the website’s common questions are displayed cleanly.
We create a specific web page on the website for questions, called the FAQ page. For your convenience, our team has created an FAQ accordion using HTML, CSS, and JavaScript.
For any website, you can use a 19-FAQ accordion collapse for informational, transactional, or commercial questions. It is copy-and-paste code with a unique UX (user experience). Paste the code on your website and add the question & answer text. Choose a stylish FAQ design from 19+ designs.
Benefits of Using an FAQ Accordion with HTML, CSS & JavaScript
An FAQ accordion helps organize questions and answers in a clean, interactive way, improving user experience and saving space on your web page.
- Improves User Experience: Users can quickly find answers without scrolling through long content.
- Saves Page Space: FAQs are hidden in collapsible sections, keeping the layout clean and short.
- Mobile-Friendly: Works responsively and smoothly on mobile and different screen sizes.
- Easy to Customize: Built with HTML, CSS & JavaScript, you can customize the design according to your theme.
- Reduces Bounce Rate: Quick access to answers keeps users engaged and on your website for longer.
- SEO Friendly: SEO-friendly FAQs have no negative impact on your webpage’s Technical SEO.
- Structured Data: Use structured data to mark up FAQs for better search visibility.
19 FAQ Accordion Source Codes in HTML, CSS & JavaScript
By using this FAQ accordion’s source code on your website, there will be no multiple <head> and <body> tags affecting your web page’s Technical SEO. These FAQs have been optimized for Technical SEO.
This FAQ tool is built with HTML, CSS, and JavaScript, using <head> and <body> tags optimized according to SEO best practices. By using our FAQs, your website will not require additional Technical SEO adjustments.
Beautiful Color Ideas for FAQ Sections
Default Colors Used in Accordions
White & black
- background: #FAFAFA
- color: black
Deep Sky Blue & white
- background: #008CBA
- color: white
Light Themes (Clean & Modern Look)
Soft Gray
- background: #f4f4f4
- color: black
Light Blue
- background: #e3f2fd
- color: black
Warm Beige
- background: #fef6e4
- color: black
Dark Themes (Sleek & Stylish Look)
Dark Gray
- background: #333
- color: white
Navy Blue
- background: #0a192f
- color: white
Deep Purple
- background: #1b1b3a
- color: white
1. Modern Rounded Accordion with Soft Answer Borders
Modern rounded-corner accordion with a good left purple border in answer collapse. This FAQ is comparable and has good style question buttons with answer collapses. You can give multiple paragraphs for the answer. Lightweight, user-friendly FAQ design. Copy-paste code.
<!DOCTYPE html>
<html lang="en">
<faqhead>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
faq body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 2px;
}
.faq-container {
max-width: 800px; /*Set the container to full width as needed. */
margin: auto;
}
.faq-card {
background: #ebe4ff;
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
}
.faq-question {
width: 100%;
text-align: left;
background: #d5c4ff; /* change the background color */
color: #333; /* change the text color */
border: none;
padding: 15px; /* adjust the box padding, height */
font-size: 18px; /* adjust the font size */
cursor: pointer;
outline: none;
display: flex;
align-items: center;
border-radius: 8px;
}
.faq-question:hover {
background: #d5c4ff !important;
color: #333 !important;
cursor: default !important;
}
.faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 15px;
transition: max-height 0.3s ease, padding 0.3s ease;
background: white;
font-size: 16px; /* adjust the answer font size */
color: #333;
border-left: 5px solid #7b61ff;
}
.faq-question.active + .faq-answer {
max-height: none;
padding: 15px;
}
</style>
</faqhead>
<faqbody>
<div class="faq-container">
<div class="faq-card">
<button class="faq-question">What makes this accordion section the best choice for creative FAQ designs?</button>
<div class="faq-answer">
<p>This section uses a clean accordion style that looks great in modern layouts and is easy to open on first click.</p>
<p>From unique designs to practical usage, this tool offers the best format for FAQs that stand out naturally.</p>
</div>
</div>
<div class="faq-card">
<button class="faq-question">Question 2</button>
<div class="faq-answer">
<p>Answer to Question 2.</p>
</div>
</div>
<div class="faq-card">
<button class="faq-question">Question 3</button>
<div class="faq-answer">
<p>Answer to Question 3.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<div class="faq-card">
<button class="faq-question">Question 4</button>
<div class="faq-answer">
<p>Answer to Question 4.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<div class="faq-card">
<button class="faq-question">Question 5</button>
<div class="faq-answer">
<p>Answer to Question 5.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<!-- Add more FAQ items as needed -->
</div>
<script>
document.querySelectorAll('.faq-question').forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('.faq-question').forEach(btn => {
if (btn !== button) {
btn.classList.remove('active');
btn.nextElementSibling.style.maxHeight = '0';
}
});
button.classList.toggle('active');
let answer = button.nextElementSibling;
if (button.classList.contains('active')) {
answer.style.maxHeight = answer.scrollHeight + 'px'; // Adjusts height dynamically
} else {
answer.style.maxHeight = '0';
}
});
});
</script>
</faqbody>
</html>
2. Modern FAQ with Feature snippets
This modern FAQ is a lightweight, easy-to-use, custom-coded collapsible accordion built with HTML, CSS, and JavaScript. In this design, you can add multiple questions and answers. You can also include feature snippets within the answers. It is customizable to match your website’s theme.
<!DOCTYPE html>
<html lang="en">
<faqhead>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Change the example what */
faq body {
font-family: Arial, sans-serif; /* Change the font family */
padding: 30px;
background-color: #ffffff; /* Change the background color */
}
h3 { /* Update the CSS selector if changing h2 to h3 or h4 */
font-size: 28px;
font-weight: bold;
color: #3d6873; /* change the h2 color */
}
h3 {
font-size: 20px; /* Change the heading size */
color: #3d6873; /* Change the question color */
}
.content {
display: none;
margin-top: 5px;
padding: 10px;
background-color: #f9f9f9; /* Change the background color */
border-left: 3px solid #3d6873; /* Change the border color */
}
.faqlink {
display: block;
margin: 10px 0;
font-weight: bold;
color: #3d6873; /* Change the question link color */
text-decoration: none;
cursor: pointer;
}
.code-snippet {
padding: 1px;
font-family: monospace;
white-space: pre-wrap;
}
</style>
</faqhead>
<faqbody>
<h3>FAQ Section</h3> <!-- Change the heading as you needed -->
<a class="faqlink"><h3>What’s the difference between a collapse and an expansion panel in web design?</h3></a>
<div class="content">
<p>A collapse hides content until triggered, while an expansion panel often shows more detail within a file or section. The collapsing effect improves UI and keeps your layout clean and responsive.</p>
<div class="code-snippet"> <!-- Copy and paste this to use bullets in other paragraphs -->
● You can control both using class or ID and customize spacing with margin styles.
<!-- add more bullets -->
</div>
</div>
<a class="faqlink"><h3>Question 2</h3></a>
<div class="content">
<p>Answer to Question 2.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<a class="faqlink"><h3>Question 3</h3></a>
<div class="content">
<p> Answer to Question 3.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<a class="faqlink"><h3>Question 4</h3></a>
<div class="content">
<p>Answer to Question 4.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<!-- Add more questions as you needed -->
<script>
document.querySelectorAll('.faqlink').forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
let content = this.nextElementSibling;
content.style.display = content.style.display === "block" ? "none" : "block";
});
});
</script>
</faqbody>
</html>
3. Rectangular Shape FAQ with Arrow
Modern rectangular-shaped FAQ accordion with a 360-degree rotating arrow when clicking on a question. Lightweight, comfortable, and easy-to-use copy-paste code that you can insert directly into your webpage. Easily adjustable to match your theme colors, with a clean white background for the answers.
Built with HTML, CSS, and JavaScript—fully optimized for SEO without using the <html>, <head>, and <body> tags. Compatible with different color themes.
<!-- Simple FAQ Accordion with Arrows & Multiple Paragraph Support -->
<div class="responsive-faq-container">
<div class="safe-faq-item">
<button class="faq-question">Here are three short paragraphs you can use for your tool <span class="arrow">▼</span></button>
<div class="faq-answer">
<p>This is a responsive and safe FAQ accordion built with HTML, CSS & JavaScript.</p>
<p>This FAQ accordion is built with pure HTML, CSS, and JavaScript to ensure a stellar user experience. It offers a secure and responsive layout, ideal for both manual customization and professional use.
</p>
<p>Whether you're a beginner or looking for an advance setup, this design gives you full control with clean, optimized code.
</p>
</div>
</div>
<div class="safe-faq-item">
<button class="faq-question">Question 2 <span class="arrow">▼</span></button>
<div class="faq-answer">
<p>First paragraph of answer to Question 2.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<div class="safe-faq-item">
<button class="faq-question">Question 3 <span class="arrow">▼</span></button>
<div class="faq-answer">
<p>First paragraph of answer to Question 3.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<div class="safe-faq-item">
<button class="faq-question">Question 4 <span class="arrow">▼</span></button>
<div class="faq-answer">
<p>First paragraph of answer to Question 4.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<!-- Add more questions and answers by copying & pasting, or remove a question if not needed -->
</div>
<style>
.responsive-faq-container { width: 100%; max-width: 650px; }
.faq-question {
background: #008CBA; /* changes the background color */
color: white; /* changes the text color */
font-size: 20px; /* H3 adujust the question box font size */
padding: 20px; /* adujust the question box height */
width: 100%;
border: solid 1px;
cursor: pointer;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-answer {
display: none;
padding: 10px;
background: #f9f9f9; /* changes the answer background color */
}
.arrow {
transition: transform 0.3s ease;
}
.faq-question.active .arrow {
transform: rotate(180deg);
}
/* Adjust for mobile screens */
@media (max-width: 768px) {
.faq-question {
font-size: 18px; /* Smaller font for mobile */
}
.arrow {
font-size: 18px; /* arrow size for tablet screen */
}
}
@media (max-width: 480px) {
.faq-question {
font-size: 16px; /* Even smaller for very small screens */
}
.arrow {
font-size: 16px; /* arrow size for mobile screen */
}
}
</style>
<script>
document.querySelectorAll('.faq-question').forEach(button => {
button.addEventListener('click', () => {
let answer = button.nextElementSibling;
let arrow = button.querySelector('.arrow');
// Check if the clicked question is already open
let isOpen = answer.style.display === 'block';
// Close all answers
document.querySelectorAll('.faq-answer').forEach(ans => ans.style.display = 'none');
document.querySelectorAll('.faq-question .arrow').forEach(arrow => arrow.innerHTML = '▼');
// Toggle the clicked answer
if (!isOpen) {
answer.style.display = 'block';
arrow.innerHTML = '▲';
}
});
});
</script>
4. Stylish White FAQ (simple and clean)
This post contains a complete documentation for a white, simple, and clean FAQ built with HTML, CSS, and JavaScript. This FAQ is created without using <html>, <head>, and <body> tags. It is fully SEO optimized, easy to use, and designed with a clean, user-friendly layout.
This FAQ accordion supports multiple paragraphs. To add multiple paragraphs, simply place the text inside <p> tags.
<style>
.faq-container {
max-width: 800px; /*Set the container to full width as needed. */
margin: auto;
background: #fff; /*Set the background color as needed. */
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.faq-item {
border-bottom: 1px solid #ddd;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 20px; /* adujust the question box height */
font-size: 18px; /*h3, Increased font size */
color: #000000; /*Set the text color as needed. */
cursor: pointer;
outline: none;
position: relative;
}
.faq-question:hover {
color: #5A5A5A; /*Set the hover color for the text as needed. */
}
.faq-answer {
display: none;
padding: 20px;
font-size: 16px; /* Increased font size */
color: #333; /*Set the text color as needed. */
background: #f4f4f4; /*Set the background color as needed. */
line-height: 1.8; /* Increased line spacing */
}
.faq-answer p {
margin-bottom: 1px; /* Added space between paragraphs */
}
.faq-question:after {
content: '+';
position: absolute;
right: 20px;
font-size: 22px; /* Slightly larger icon size */
color: #333;
}
.faq-question.active:after {
content: '-';
}
.faq-question.active + .faq-answer {
display: block;
}
</style>
<div class="faq-container">
<div class="faq-item">
<button class="faq-question">How does this free FAQ tool help with code organization and page layouts?</button>
<div class="faq-answer">
<p>This simple toggle FAQ script lets you organize answers cleanly in any layout using minimal code. It's free to use and works seamlessly across sections.</p>
<p>You get full access to the source, making it easy to customize or embed into different projects without bloated code.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 2</button>
<div class="faq-answer">
<p>First paragraph of answer to Question 2.</p>
<p></p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 3</button>
<div class="faq-answer">
<p>First paragraph of answer to Question 3.</p>
<p></p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 4</button>
<div class="faq-answer">
<p>First paragraph of answer to Question 4.</p>
<p></p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 5</button>
<div class="faq-answer">
<p>First paragraph of answer to Question 5.</p>
<p></p>
</div>
</div>
</div>
<script>
document.querySelectorAll('.faq-question').forEach(button => {
button.addEventListener('click', () => {
let answer = button.nextElementSibling;
let arrow = button.querySelector('.arrow');
// Check if the clicked question is already open
let isOpen = answer.style.display === 'block';
// Close all answers
document.querySelectorAll('.faq-answer').forEach(ans => ans.style.display = 'none');
document.querySelectorAll('.faq-question .arrow').forEach(arrow => arrow.innerHTML = '▼');
// Toggle the clicked answer
if (!isOpen) {
answer.style.display = 'block';
arrow.innerHTML = '▲';
}
});
});
</script>
5. Clean FAQ Accordion with Arrow (Google Style)
This FAQ tool is specially designed by the ProPakistanitools, featuring a 180-degree rotating arrow. Built with HTML, CSS, and JavaScript, it does not include the <html>, <head>, and <body> tags, making it easy to embed. It introduces a new type of collapsible FAQ that expands and hides questions and answers.
It is fully responsive across multiple screen sizes and supports multiple question card boxes. The layout is user-friendly and modern. This is a free online FAQ tool with open-source code, offering 19 different styles of FAQ accordions.
<!-- Google-Style FAQ Tool -->
<div class="faq-container">
<div class="faq-item">
<div class="faq-divider"></div>
<button class="faq-question">Why should I use this simple FAQ tool on my website?<span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Easily create and manage FAQs on your website without any plugins. This simple tool lets you add interactive questions and answers with just a click.</p>
<p>Improve user experience by organizing information clearly. This FAQ section is lightweight, mobile-friendly, and works seamlessly with any website.</p>
<p>Improve user experience by providing quick answers to common questions. With a clean design and smooth animations, your FAQ section will look professional and engaging.</p>
</div>
<div class="faq-divider"></div>
</div>
<div class="faq-item">
<button class="faq-question">Question 2 <span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Answer to Question 2.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<div class="faq-divider"></div>
</div>
<div class="faq-item">
<button class="faq-question">Question 3 <span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Answer to Question 3.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<div class="faq-divider"></div>
</div>
<div class="faq-item">
<button class="faq-question">Question 4 <span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Answer to Question 4.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<div class="faq-divider"></div>
</div>
<div class="faq-item">
<button class="faq-question">Question 5 <span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Answer to Question 5.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<div class="faq-divider"></div>
</div>
<!-- Add more FAQ items as needed -->
</div>
<style>
.faq-container {
width: 100%;
max-width: 650px; /*Set the container to full width as needed. */
margin: auto;
}
.faq-item { padding: 0; }
.faq-question {
background: none;
border: none;
padding: 10px; /*Set the height for question box as needed. */
width: 100%;
text-align: left;
font-size: 18px; /*Set the font size for question as needed. */
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-answer {
display: none;
padding: 15px;
color: #333;
}
.faq-answer p {
margin: 10px 0; /* Added spacing between paragraphs */
}
.faq-divider {
height: 1px;
background: #ccc;
margin: 5px 0;
}
.faq-question .arrow {
font-size: 30px; /* Increased arrow size */
transition: transform 0.3s ease;
}
.faq-question.active .arrow {
transform: rotate(90deg);
}
</style>
<script>
document.querySelectorAll('.faq-question').forEach(button => {
button.addEventListener('click', () => {
let answer = button.nextElementSibling;
let arrow = button.querySelector('.arrow');
if (answer.style.display === 'block') {
answer.style.display = 'none';
arrow.style.transform = 'rotate(0deg)';
} else {
document.querySelectorAll('.faq-answer').forEach(ans => ans.style.display = 'none');
document.querySelectorAll('.faq-question .arrow').forEach(arr => arr.style.transform = 'rotate(0deg)');
answer.style.display = 'block';
arrow.style.transform = 'rotate(90deg)';
}
});
});
</script>
6. Modern Rounded with Arrow
This modern FAQ is user-friendly, lightweight, and features a 360-degree rotating arrow. Built with HTML, CSS, and JavaScript without <html>, <head>, and <body> tags, it has a clean interface. This FAQ accordion supports multiple paragraphs. This FAQ is SEO-optimized with the best name for FAQ pages.
<div class="faq-container">
<div class="faq-card">
<button class="faq-question">How does this FAQ drop-down enhance my website’s style and user experience? <span class="arrow">▼</span></button>
<div class="faq-answer">
<p>This drop-down script fits smoothly into any web or mobile site, adapting to your page layout and template style.</p>
<p>It keeps your content clean and accessible, improving navigation with a naturally intuitive UI design.</p>
<p>Whether you’re building a stylish landing page or a full website, this tool blends into your site's flow.</p>
<p>No extra coding is needed — just plug it in and upgrade your web experience instantly.</p>
</div>
</div>
<div class="faq-card">
<button class="faq-question">How does it work? <span class="arrow">▼</span></button>
<div class="faq-answer">
<p>Clicking on a question expands the answer with a smooth animation, enhancing user experience.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<div class="faq-card">
<button class="faq-question">Is it mobile-friendly? <span class="arrow">▼</span></button>
<div class="faq-answer">
<p>Yes! This FAQ section is fully responsive and works on all devices.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<div class="faq-card">
<button class="faq-question">Question 4 <span class="arrow">▼</span></button>
<div class="faq-answer">
<p>Answer to Question 4.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<div class="faq-card">
<button class="faq-question">Question 5 <span class="arrow">▼</span></button>
<div class="faq-answer">
<p>Answer to Question 5.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
</div>
<!-- add more question as needed -->
</div>
<style>
.faq-container {
max-width: 650px; /* change the container full width as needed */
margin: auto;
}
.faq-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
overflow: hidden;
}
.faq-question {
width: 100%;
text-align: left;
background: #007BFF; /* change the background color */
color: white; /* change the text color */
border: none;
padding: 15px; /* adjust the box padding, height */
font-size: 18px; /* adjust the font size */
cursor: pointer;
outline: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 15px;
transition: max-height 0.3s ease, padding 0.3s ease;
background: #f9f9f9;
font-size: 16px; /* adjust the answer font size */
color: #333;
}
.faq-question .arrow {
transition: transform 0.3s ease;
}
.faq-question.active .arrow {
transform: rotate(180deg);
}
.faq-question.active + .faq-answer {
max-height: 200px;
padding: 15px;
}
</style>
<script>
document.querySelectorAll('.faq-question').forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('.faq-question').forEach(item => {
if (item !== button) {
item.classList.remove('active');
item.nextElementSibling.style.maxHeight = '0';
}
});
button.classList.toggle('active');
let answer = button.nextElementSibling;
answer.style.maxHeight = button.classList.contains('active') ? answer.scrollHeight + 'px' : '0';
});
});
</script>
7. New Model Faq with Main and Sub Parts
New model of the FAQ specially designed for big projects like which have a main part and subpart. This FAQ is user-friendly copy-paste code built with HTML, CSS, and JavaScript, SEO optimized with <html>, <head>, and <body> tags. You can use this FAQ on your website without any plugin.
FAQ supports multiple main and subparts and also supports multiple paragraphs. FAQ is designed by ProPakistaniTools.com.
<!DOCTYPE html>
<html lang="en">
<faqhead>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
faq body {
font-family: Arial, sans-serif;
padding: 5px;
max-width: 600px; /* Limits the width for better readability */
margin: auto; /* Centers the content */
}
h3 { /* Update the CSS selector if changing h2 to h3 or h4 */
font-size: 28px;
font-weight: bold;
color: #3d6873; /* change the h2 color */
}
.content {
display: none;
margin-top: 5px;
padding: 10px;
background-color: #f9f9f9; /* change the background color */
border-left: 3px solid #3d6873; /* change the heading color */
}
.faqlink {
display: block;
margin: 10px 0;
font-weight: bold;
color: #3d6873; /* change the question color */
text-decoration: none;
cursor: pointer;
}
.nested-content {
display: none;
margin-left: 20px;
padding: 5px;
background-color: #e9ecef; /* change the sub background color */
border-left: 2px solid #3d6873; /* change the sub ansawer border color */
}
</style>
</faqhead>
<faqbody>
<h3>Project Name</h3>
<a class="faqlink"><p>What are the key tools and techniques modern developers use for designing and styling UI efficiently? </p></a> <!-- add the question for the main -->
<div class="content">
<p>Modern developers rely on frameworks like Tailwind and plugins like DaisyUI or Flowbite to speed up UI development. Tools such as Figma Floating Panels, text case CSS, and data attribute CSS selectors also help create more flexible and scalable designs.</p> <!-- here answer -->
<a class="faqlink nested"><p>How does Figma Type on a Path help in creative design? </p></a> <!-- add the question for the sub -->
<div class="nested-content"><p>Figma Type on a Path allows designers to write text along curves or shapes, making headings and logos visually appealing. This technique, when paired with Tailwind classes and custom components from DaisyUI, brings extended creativity to UI workflows.</p></div> <!-- here answer -->
<a class="faqlink nested"><p>How do classes differ from data attribute CSS selectors in styling?</p></a> <!-- add the question for the sub -->
<div class="nested-content"><p>While Tailwind and DaisyUI rely heavily on utility classes, data attribute CSS selectors offer advanced targeting without changing HTML structure. They're especially useful when building reusable components or integrating with plugins like Flowbite for extended interactivity.</p></div> <!-- here answer -->
</div>
<a class="faqlink"><p>Question 2</p></a> <!-- add the question for the main -->
<div class="content">
<p>Main answer to Question 2.</p> <!-- here answer -->
<a class="faqlink nested"><p>Sub Question 2.1</p></a> <!-- add the question for the sub -->
<div class="nested-content"><p>Answer to Sub Question 2.1</p></div> <!-- here answer -->
<a class="faqlink nested"><p>Sub Question 2.2</p></a> <!-- add the question for the sub -->
<div class="nested-content"><p>Answer to Sub Question 2.2</p></div> <!-- here answer -->
</div>
<a class="faqlink"><p>Question 3</p></a> <!-- add the question for the main -->
<div class="content">
<p>Main answer to Question 3.</p> <!-- here answer -->
<a class="faqlink nested"><p>Sub Question 3.1</p></a> <!-- add the question for the sub -->
<div class="nested-content"><p>Answer to Sub Question 3.1</p></div> <!-- here answer -->
<a class="faqlink nested"><p>Sub Question 3.2</p></a> <!-- add the question for the sub -->
<div class="nested-content"><p>Answer to Sub Question 3.2</p></div> <!-- here answer -->
</div>
<a class="faqlink"><p>Question 4</p></a> <!-- add the question for the main -->
<div class="content">
<p>Main answer to Question 4.</p> <!-- here answer -->
<a class="faqlink nested"><p>Sub Question 4.1</p></a> <!-- add the question for the sub -->
<div class="nested-content"><p>Answer to Sub Question 4.1</p></div> <!-- here answer -->
<a class="faqlink nested"><p>Sub Question 4.2</p></a> <!-- add the question for the sub -->
<div class="nested-content"><p>Answer to Sub Question 4.2</p></div> <!-- here answer -->
</div>
<!-- add more question and sub as you needed -->
<script>
document.querySelectorAll('.faqlink').forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
let content = this.nextElementSibling;
content.style.display = content.style.display === "block" ? "none" : "block";
});
});
</script>
</faqbody>
</html>
8. Accordion FAQ with Arrow Icon
Accordion FAQ is supported with an arrow icon and has a fixed paragraph below the FAQ title. Accordion supports multiple paragraphs and questions. FAQ icon is 180 degrees rotating and has question and answer bottom & top dividers.
Accordion is built with HTML, CSS, and JavaScript without <html>, <head>, and <body> tags, optimized for SEO. Fully responsive for all devices, user-friendly, lightweight FAQs. Customizable with your theme color and adjustable.
<!-- Google-Style FAQ -->
<h3 class="faq-heading">Frequently Asked Questions</h3>
<p>Easily create and manage FAQs on your website without any plugins. This simple tool lets you add interactive questions and answers with just a click.</p>
<p> </p><!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
<div class="faq-container">
<div class="faq-item">
<div class="faq-divider"></div>
<button class="faq-question">How can I use Angular to create an expandable form with accordion panels and perfect scrollbar?<span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Using Angular, you can easily expand and collapse accordion panels on click, creating a smooth user experience. Integrate perfect scrollbar to enhance scrolling inside panels with customizable margin and padding for a neat look.</p>
<p>This approach works for all types of forms and UI envelopes, with simple code and clear examples to guide you. You can also combine this with other libraries to improve design and functionality seamlessly.</p>
</div>
<div class="faq-divider"></div>
</div>
<div class="faq-item">
<button class="faq-question">Question 2 <span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Answer to Question 2.</p>
<p> </p><!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<div class="faq-divider"></div>
</div>
<div class="faq-item">
<button class="faq-question">Question 3 <span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Answer to Question 3.</p>
<p> </p><!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<div class="faq-divider"></div>
</div>
<div class="faq-item">
<button class="faq-question">Question 4 <span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Answer to Question 4.</p>
<p> </p><!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<div class="faq-divider"></div>
</div>
<div class="faq-item">
<button class="faq-question">Question 5 <span class="arrow">▸</span></button>
<div class="faq-answer">
<p>Answer to Question 5.</p>
<p> </p> <!-- Add a second paragraph inside the <p> tag here -->
<!-- If you don’t need a second paragraph, leave the <p> tag empty -->
</div>
<div class="faq-divider"></div>
</div>
</div>
<style>
.faq-container {
width: 100%;
max-width: 650px; /* change the container full width*/
margin: auto;
}
h3, p {
max-width: 650px; /* change the full width as you needed*/
padding: 10px;
margin: auto;
text-align: left; /* change the alignment */
}
h3 {
color: black; /* change the h2 heading as you needed*/
}
.faq-item { padding: 0; }
.faq-question {
background: none;
border: none;
padding: 10px; /* change the question box heright*/
width: 100%;
text-align: left;
font-size: 18px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-answer {
display: none;
padding: 15px;
color: #333;
}
.faq-answer p {
margin: 10px 0;
}
.faq-divider {
height: 1px;
background: #ccc;
margin: 5px 0;
}
.faq-question .arrow {
font-size: 30px;
transition: transform 0.3s ease;
}
.faq-question.active .arrow {
transform: rotate(90deg);
}
</style>
<script>
document.querySelectorAll('.faq-question').forEach(button => {
button.addEventListener('click', () => {
let answer = button.nextElementSibling;
let arrow = button.querySelector('.arrow');
if (answer.style.display === 'block') {
answer.style.display = 'none';
arrow.style.transform = 'rotate(0deg)';
} else {
document.querySelectorAll('.faq-answer').forEach(ans => ans.style.display = 'none');
document.querySelectorAll('.faq-question .arrow').forEach(arr => arr.style.transform = 'rotate(0deg)');
answer.style.display = 'block';
arrow.style.transform = 'rotate(90deg)';
}
});
});
</script>
9. Accordion FAQ with + and – Toggle Arrows
Accordion FAQ is modern and animated with plus and minus arrows. Easy to adjust, built with HTML, CSS, and JavaScript, including the <html>, <head>, and <body> tags, fully optimized for SEO. Copy-paste code, usable on a web page without any plugin needed. Responsive on different screen sizes.
<!DOCTYPE html>
<html lang="en">
<faqhead>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
@import url('https://fonts.googleapis.com/css?family=Hind:300,400&display=swap');
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
faq body {
margin: 0;
padding: 0;
font-family: 'Hind', sans-serif;
background: #fff;
color: #4d5974;
display: flex;
min-height: 100vh;
}
h3 { /* Update the CSS selector if changing h2 to h3 or h4 */
font-size: 28px;
font-weight: bold;
color: #7288a2; /* change the h3 color */
margin-top: 1px;
margin-bottom: 1px;
}
.container {
margin: 0 auto;
padding: 0px;
max-width: 700px; /* change the full width */
width: 100%;
}
.accordion .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded='true'] {
border-bottom: 1px solid #03b5d2;
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
color: #7288a2;
font-size: 1.15rem;
font-weight: 400;
border: none;
background: none;
outline: none;
}
.accordion button:hover,
.accordion button:focus {
cursor: pointer;
color: #03b5d2;
}
.accordion button:hover::after,
.accordion button:focus::after {
cursor: pointer;
color: #03b5d2;
border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: '';
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: '';
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded='true'] {
color: #03b5d2;
}
.accordion button[aria-expanded='true'] .icon::after {
width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
opacity: 1;
max-height: none; /* Ya max-height: none; rakh dein */
transition: all 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content p {
font-size: 1rem;
font-weight: 300;
margin: 2em 0;
}
@media screen and (max-width: 768px) {
.container {
width: 97%;
}
.accordion .accordion-content {
opacity: 0;
max-height: auto;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content p {
font-size: 1rem;
font-weight: 300;
margin: 2em 0;
height: auto;
}
</style>
</faqhead>
<faqbody>
<div class="container">
<h3>Frequently Asked Questions</h3>
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-1" aria-expanded="false">
<span class="accordion-title">Question 1</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Answer to Question 1.
</p>
<p> </p> <!-- second paragraph if want use -->
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false">
<span class="accordion-title">Question 2</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Answer to Question 2.
</p>
<p> </p> <!-- second paragraph if want use -->
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false">
<span class="accordion-title">Question 3</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Answer to Question 3.
</p>
<p> </p> <!-- second paragraph if want use -->
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-4" aria-expanded="false">
<span class="accordion-title">Question 4</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Answer to Question 4.
</p>
<p> </p> <!-- second paragraph if want use -->
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false">
<span class="accordion-title">Question 5</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>
Answer to Question 5.
</p>
<p> </p> <!-- second paragraph if want use -->
</div>
</div>
</div>
</div>
<script>
const items = document.querySelectorAll('.accordion button');
function toggleAccordion() {
const itemToggle = this.getAttribute('aria-expanded');
for (i = 0; i < items.length; i++) {
items[i].setAttribute('aria-expanded', 'false');
}
if (itemToggle == 'false') {
this.setAttribute('aria-expanded', 'true');
}
}
items.forEach((item) => item.addEventListener('click', toggleAccordion));
</script>
</faqbody>
</html>
10. Expandable FAQ with Plus and Cross Symbols
Expand and hide the answer button FAQ with a plus and cross mark symbol. Built with HTML, CSS, and JavaScript without including the <html>, <head>, and <body> tags. Easy to understand copy-paste code, user-friendly with all devices.
Clicking on the question button plus arrow symbol will rotate 180 degrees and convert to a cross mark arrow.
<div class="centerplease">
FAQ
</div>
<br>
<div class="content">
<div>
<input type="checkbox" id="question1" name="q" class="questions">
<div class="plus">+</div>
<label for="question1" class="question">
Question 1
</label>
<div class="answers">
<p>Answer to Question 1.</p>
<p> </p>
</div>
</div>
<div>
<input type="checkbox" id="question2" name="q" class="questions">
<div class="plus">+</div>
<label for="question2" class="question">
Question 2
</label>
<div class="answers">
<p>Answer to Question 2. </p>
<p> </p>
</div>
</div>
<div>
<input type="checkbox" id="question3" name="q" class="questions">
<div class="plus">+</div>
<label for="question3" class="question">
Question 3
</label>
<div class="answers">
<p>Answer to Question 3.</p>
<p> </p>
</div>
</div>
</div>
<style>
body {
font-family: Sans-serif;
max-width: 700px;
width: 90%;
font-size: 18px;
background:#eaeaea;
}
.content {
width: 100%;
padding: 0;
}
.centerplease {
font-size: 40px;
}
/*Question*/
.question {
position: relative;
background: #f9f9f9;
margin: 0;
padding: 10px 10px 10px 50px;
display: block;
width:100%;
cursor: pointer;
}
/*Answer*/
.answers {
padding: 0px 15px;
margin: 5px 0;
width:100%!important;
height: 0;
overflow: hidden;
z-index: -1;
position: relative;
opacity: 0;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.questions:checked ~ .answers{
height: auto;
opacity: 1;
padding: 12px;
}
/*FAQ Toggle*/
.plus {
position: absolute;
margin-left: 10px;
z-index: 5;
font-size: 2em;
line-height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.questions:checked ~ .plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.questions {
display: none;
}
</style>
11. Colorful FAQ with Up & Down Arrows
This is a question-and-answer layout FAQ with a colorful background and up & down arrows, featuring a comfortable and responsive design. It supports multiple paragraphs and questions. The FAQ code is copy-paste, small, and easy to understand.
<div class="card-wrapper | content-cc">
<div class="faq-card">
<main class="faq-content">
<h3>FAQ</h3>
<div class="faq-articles">
<article class="faq-accordion">
<input type="checkbox" class="tgg-title" id="tgg-title-1">
<div class="faq-accordion-title">
<label for="tgg-title-1">
<h3>What is an accordion in web design?</h3>
<span class="arrow-icon">
<img src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
</span>
</label>
</div>
<div class="faq-accordion-content">
<p> An accordion is a UI element that lets users expand and collapse sections of content. It helps organize information in a clean, space-saving way.</p>
</div>
</article> <!-- faq accordion -->
<article class="faq-accordion">
<input type="checkbox" class="tgg-title" id="tgg-title-2">
<div class="faq-accordion-title">
<label for="tgg-title-2">
<h3>
Question 2
</h3>
<span class="arrow-icon">
<img src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
</span>
</label>
</div>
<div class="faq-accordion-content">
<p>Answer to Question 2.</p>
</div>
</article> <!-- faq accordion -->
<article class="faq-accordion">
<input class="tgg-title" type="checkbox" id="tgg-title-3">
<div class="faq-accordion-title">
<label for="tgg-title-3">
<h3>
Question 3
</h3>
<span class="arrow-icon">
<img src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
</span>
</label>
</div>
<div class="faq-accordion-content">
<p>Answer to Question 3.</p>
</div>
</article> <!-- faq accordion -->
<article class="faq-accordion">
<input class="tgg-title" type="checkbox" id="tgg-title-4">
<div class="faq-accordion-title">
<label for="tgg-title-4">
<h3>
Question 4
</h3>
<span class="arrow-icon">
<img src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
</span>
</label>
</div>
<div class="faq-accordion-content">
<p>
Answer to Question 4.</p>
</div>
</article> <!-- faq accordion -->
<article class="faq-accordion">
<input class="tgg-title" type="checkbox" id="tgg-title-5">
<div class="faq-accordion-title">
<label for="tgg-title-5">
<h3>
Question 5
</h3>
<span class="arrow-icon">
<img src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
</span>
</label>
</div>
<div class="faq-accordion-content">
<p> Answer to Question 5.</p>
</div>
</article> <!-- faq accordion -->
</div> <!-- faq articles -->
</main> <!-- faq -->
</div> <!-- faq card -->
</div> <!-- card wrapper -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');
:root{
--principal-font: 'Kumbh Sans', sans-serif;
--font-size: 12px;
--bg-gradient: linear-gradient(to bottom, hsl(273, 75%, 66%), hsl(240, 73%, 65%));
--primary-dark-color: hsl(238, 29%, 16%);
--primary-soft-color: hsl(14, 88%, 65%);
--neutral-dark-color: hsl(237, 12%, 33%);
--neutral-soft-color: hsl(240, 6%, 50%);
}
html {
box-sizing: border-box;
}
* {box-sizing: inherit;}
.attribution {
font-size: 11px; text-align: center;
background-color: hsl(240, 5%, 91%);
padding: 8px 0 5px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.attribution a { color: hsl(228, 45%, 44%); }
/* global */
/*================================================*/
body {
margin:0;
font-family: var(--principal-font);
font-size: 12px;
color: var(--neutral-dark-color);
background: var(--bg-gradient);
background-size: cover;
justify-content: center;
width: 100%;
}
.card-wrapper {
min-height: 100vh;
padding-bottom: 10px; /* footer fixed */
}
p {
margin: 0 0 12px;
line-height: 1.5;
}
h3 {
margin: 12px 0;
}
/* generics */
/*================================================*/
.content-cc{
display: flex;
justify-content: center;
align-items: center;
}
/* FAQ card */
/*================================================*/
.faq-card {
background-color: #fff;
border-radius: 20px;
max-width: 650px;
margin-top: 90px;
box-shadow: 0px 60px 50px -25px rgba(0, 0, 0, 0.35);
}
/* FAQ card: imagenes */
/*================================================*/
.faq-ilustrations{
position: relative;
}
.faq-ilustrations .mobile.ilust{
position: absolute;
top:-110px;
left:-30px;
right: 0;
}
.mobile{
display: block;
margin: 0 auto;
}
/* FAQ card: main */
/*================================================*/
.faq-content {
padding: 9px 25px 3rem;
}
.faq-content h3 {
font-size: 32px;
text-align: center;
color: var(--primary-dark-color);
}
.faq-accordion {
padding: 8px 0;
border-bottom: 1px solid hsl(240, 5%, 91%);
}
/* FAQ card: main title */
/*================================================*/
/* checkbox tgg-title*/
input.tgg-title {
appearance: unset;
all:unset;
}
.faq-accordion-title label{
display: flex;
align-items: center;
cursor: pointer;
}
.faq-accordion-title h3{
font-size: 18px /*var(--font-size)*/;
font-weight: 400;
color: var(--neutral-dark-color);
}
.faq-accordion-title span{
margin-left: auto;
transition: transform .4s ease-in-out;
}
/* FAQ card: main content */
/*================================================*/
.faq-accordion-content {
color: var(--neutral-soft-color);
overflow: hidden;
font-size: 16px;
max-height: 0;
transition: max-height .4s ease-in-out;
}
/* Effects */
/*================================================*/
/* main title, accordion title effects */
.faq-accordion-title:hover h3{
color: var(--primary-soft-color)
}
/* onclick "" */
.faq-accordion .tgg-title:checked + div>label>h2 {
font-weight: 700;
}
.faq-accordion .tgg-title:checked + div>label>span {
will-change: transform;
transform: rotate(180deg);
}
/* main content, acordion text effect */
.faq-accordion .tgg-title:checked ~ .faq-accordion-content{
will-change: max-height;
max-height: 80px;
}
</style>
12. Collapsible FAQ with Triangle Indicators
Collapsible FAQ is a modern, clean, and best design layout for FAQ pages featuring a 180° rotating triangle arrow that moves from bottom to top. This FAQ is built with HTML, CSS, and JavaScript, optimised for initial SEO. FAQ with best H3 heading, responsive design for Android, iPhone, and PC.
<!DOCTYPE html>
<html lang="en">
<faqhead>
<meta charset="UTF-8">
<style>
/* Reset default margins and paddings for all elements */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Style for the main FAQ container */
.faq-container {
max-width: 800px; /* Limit the width for better readability */
margin: 50px auto; /* Center the container and add vertical spacing */
padding: 20px;
font-family: 'Arial, sans-serif';
color: #333; /* Base text color */
}
/* Style for the main title */
.faq-container h3 {
text-align: center;
font-size: 30px;
margin-bottom: 40px;
color: #2c3e50; /* Dark blue color for the title */
}
/* Style for each FAQ item */
.faq-item {
border-bottom: 1px solid #ddd; /* Light gray border between items */
overflow: hidden; /* Hide overflowing content */
}
/* Style for the question buttons */
.faq-question {
background-color: #ecf0f1; /* Light gray background */
width: 100%;
padding: 20px;
text-align: left;
font-size: 18px;
border: none;
outline: none;
cursor: pointer;
position: relative;
transition: background-color 0.3s ease; /* Smooth background transition on hover */
}
/* Hover effect for question buttons */
.faq-question:hover {
background-color: #d0d7de; /* Slightly darker gray on hover */
}
/* Style for the arrow icon */
.faq-question .arrow {
position: absolute;
right: 20px;
transition: transform 0.3s ease; /* Smooth rotation transition */
}
/* Rotate the arrow when the question is active (expanded) */
.faq-question.active .arrow {
transform: rotate(180deg); /* Rotate arrow 180 degrees */
}
/* Style for the answer sections */
.faq-answer {
max-height: 0; /* Initially hide the answer */
overflow: hidden;
transition: max-height 0.3s ease; /* Smooth transition for expanding */
background-color: #fff; /* White background for answers */
}
/* Style for the answer text */
.faq-answer p {
padding: 20px;
font-size: 16px;
line-height: 1.5; /* Increase line height for better readability */
color: #555; /* Slightly lighter text color for answers */
}
/* Harmonious color palette for the body background */
body {
background-color: #f5f7fa; /* Very light blue-gray background */
}
</style>
</faqhead>
<faqbody>
<div class="faq-container">
<h3>Frequently Asked Questions</h3>
<!-- Start of the Accordion -->
<div class="faq-item">
<button class="faq-question">
Question 1
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>Answer to Question 1.</p>
<p> </p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Question 2
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>Answer to Question 2.</p>
<p> </p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Question 3
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>Answer to Question 3.</p>
<p> </p>
</div>
</div>
<!-- End of the Accordion -->
</div>
<!-- Link to the external JavaScript file -->
<script>
// Select all question buttons
const faqQuestions = document.querySelectorAll('.faq-question');
// Loop through each question button
faqQuestions.forEach(question => {
// Add a click event listener to each question
question.addEventListener('click', () => {
// Close any other open answers except the one clicked
faqQuestions.forEach(item => {
if (item !== question) {
item.classList.remove('active'); // Remove 'active' class to reset arrow rotation
item.nextElementSibling.style.maxHeight = null; // Collapse the answer
}
});
// Toggle 'active' class on the clicked question to rotate the arrow
question.classList.toggle('active');
// Select the corresponding answer div
const answer = question.nextElementSibling;
// Check if the answer is already open
if (answer.style.maxHeight) {
// If open, close it by resetting max-height
answer.style.maxHeight = null;
} else {
// If closed, set max-height to scrollHeight to expand it
answer.style.maxHeight = answer.scrollHeight + 'px';
}
});
});
</script>
</faqbody>
</html>
13. Lavender Themed FAQ Design
With a lavender background color, this FAQ is clean with H3 top heading. FAQ is built with HTML, CSS, and JavaScript with responsive tool layout. Easy to copy-paste code, adjustable with all theme colors.
<!DOCTYPE html>
<html lang="en">
<faqhead>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@font-face {
font-family: "WorkSans";
src: url(./assets/fonts/WorkSans-VariableFont_wght.ttf);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "WorkSans", sans-serif;
}
body {
background-color: #ccccff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
#card {
background-color: white;
padding: 1.5rem;
max-width: 650px;
width: 100%;
border-radius: 10px;
}
h3 {
color: hsl(292, 42%, 14%);
font-size: 2rem;
margin-bottom: 1.5rem;
}
.card-item {
padding: 1rem 0;
border-bottom: 2px solid hsl(275, 100%, 97%);
}
.card-item:last-child {
border-bottom: none;
}
.card-item-btn {
display: flex;
justify-content: space-between;
font-size: 18px;
font-weight: 700;
color: hsl(292, 42%, 14%);
width: 100%;
border: none;
background: none;
cursor: pointer;
text-align: left;
}
.icons img {
width: 20px;
}
.minus-icon {
display: none;
}
.card-item-description {
font-size: 16px;
color: hsl(292, 16%, 49%);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
@media (max-width: 700px) {
#card {
width: 100%;
max-width: 99%;
}
}
</style>
</faqhead>
<faqbody>
<main>
<div id="card">
<h3>FAQs</h3>
<div class="card-item">
<button class="card-item-btn">
What is an FAQ section and why is it important?
<div class="icons">
<img class="plus-icon btn-icon" src="./assets/images/icon-plus.svg" alt="">
<img class="minus-icon btn-icon" src="./assets/images/icon-minus.svg" alt="">
</div>
</button>
<div class="card-item-description">
<p>An FAQ (Frequently Asked Questions) section is a collection of common questions and answers related to a product, service, or topic. It improves user experience by quickly addressing concerns, reducing support requests, and enhancing website clarity and trust.</p>
<p> </p>
</div>
</div>
<div class="card-item">
<button class="card-item-btn">
Question 2
<div class="icons">
<img class="plus-icon btn-icon" src="./assets/images/icon-plus.svg" alt="">
<img class="minus-icon btn-icon" src="./assets/images/icon-minus.svg" alt="">
</div>
</button>
<div class="card-item-description">
<p>Answer to Question 2.</p>
<p> </p>
</div>
</div>
<div class="card-item">
<button class="card-item-btn">
Question 3
<div class="icons">
<img class="plus-icon btn-icon" src="./assets/images/icon-plus.svg" alt="">
<img class="minus-icon btn-icon" src="./assets/images/icon-minus.svg" alt="">
</div>
</button>
<div class="card-item-description">
<p>Answer to Question 3.</p>
<p> </p>
</div>
</div>
</div>
</main>
<script>
document.querySelectorAll(".card-item-btn").forEach(button => {
button.addEventListener("click", function () {
const description = this.nextElementSibling;
const plusIcon = this.querySelector(".plus-icon");
const minusIcon = this.querySelector(".minus-icon");
if (description.style.maxHeight) {
description.style.maxHeight = null;
plusIcon.style.display = "block";
minusIcon.style.display = "none";
} else {
description.style.maxHeight = description.scrollHeight + "px";
plusIcon.style.display = "none";
minusIcon.style.display = "block";
}
});
});
</script>
</faqbody>
</html>
14. Newspaper-Style FAQ with White Border
Newspaper style FAQ with black background color & white border, old FAQ style built with HTML, CSS, and JavaScript. This FAQ is optimised for technical SEO, copy-paste code adjustable with all theme colors. This tool is user-friendly, lightweight code without a plugin needed.
<!DOCTYPE html>
<html lang="en">
<faqhead>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #333;
color: #fff;
text-align: center;
padding: 0em 1em;
}
h3 {
margin-bottom: 10px;
font-size: 20px;
}
.accordion {
max-width: 700px;
margin: 0 auto;
text-align: left;
}
article {
border: 1px solid #fff;
padding: 1em;
margin-bottom: 1em;
}
p {
margin-bottom: 1em;
font-size: 16px;
}
input[type="radio"] {
display: none;
}
label {
display: block;
cursor: pointer;
}
div.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
input[type="radio"]:checked + label + div.content {
max-height: 1000px; /* Arbitrary high value to allow content to expand */
transition: max-height 0.5s ease;
}
/* Optional smooth open/close with JavaScript */
.active {
max-height: none !important;
}
</style>
</faqhead>
<faqbody>
<h3>Frequently Asked Questions</h3>
<div class="accordion">
<article>
<input id="article1" type="radio" name="articles" checked>
<label for="article1">
<h3>Optimizing Your SEO-Friendly FAQ Tool Built with HTML, CSS, and JavaScript</h3>
</label>
<div class="content">
<p>Creating an FAQ tool with HTML, CSS, and JavaScript is a great way to enhance user experience and boost CTR (Click-Through Rate). A well-structured FAQ section improves engagement, reduces bounce rates, and increases the chances of ranking higher on search engine results pages (SERPs). Let’s explore how you can build a responsive FAQ accordion that is both user-friendly and SEO-optimized.</p>
<p> </p>
</div>
</article>
<article>
<input id="article2" type="radio" name="articles">
<label for="article2">
<h3>Structure Your FAQ Tool with HTML</h3>
</label>
<div class="content">
<p>The foundation of any FAQ section is HTML. Use div elements to organize questions and answers, ensuring a clean and structured layout. Utilize semantic HTML like section and article to improve SEO and help search engines understand your content better. Adding schema markup for FAQs can further enhance visibility in rich search snippets, increasing CTR.</p>
<p> </p>
</div>
</article>
<article>
<input id="article3" type="radio" name="articles">
<label for="article3">
<h3>Style Your FAQ with CSS for a Better User Experience</h3>
</label>
<div class="content">
<p>CSS plays a crucial role in making your FAQ accordion visually appealing. Use flexbox or grid layouts to create a responsive design that adapts well to different screen sizes. Adding hover effects and smooth transitions will make interactions more engaging. A mobile-friendly design improves user retention and ensures your FAQ section looks professional on all devices.</p>
<p> </p>
</div>
</article>
<article>
<input id="article4" type="radio" name="articles">
<label for="article4">
<h3>Add Interactivity with JavaScript for Better Engagement</h3>
</label>
<div class="content">
<p>Using JavaScript, you can implement a dynamic FAQ accordion where clicking a question expands the answer. This improves user experience by reducing clutter and making navigation easier. A simple toggle function using event listeners ensures that only one FAQ answer is open at a time. Implementing lazy loading for images and animations can also enhance page speed, further boosting SEO and CTR.</p>
<p>By combining HTML, CSS, and JavaScript, you can create a fully functional and engaging FAQ tool that not only enhances user experience but also drives more traffic to your website. Optimizing for SEO and CTR ensures that your FAQ section appears in Google’s featured snippets, increasing visibility and clicks.</p>
</div>
</article>
</div>
</faqbody>
</html>
15. Blog-Style FAQ with Read More Link
Blog frontend design FAQ is responsive and easy to understand, with a ‘Read More’ link whether the link is external or internal. Lightweight code, adjustable with portfolio or services websites and other websites.
- Improve page speed
- Be easily customizable
- Enhance technical SEO
- Work well on all devices
The “Read More” button appears to be a link intended to:
- Expand additional FAQ content
- Or redirect to a full FAQ page or section
<!DOCTYPE html>
<html lang="en">
<faqhead>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.faq .responsive-cell-block {
min-height: 75px;
}
.faq * {
font-family: Nunito, sans-serif;
}
.faq .text-blk {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 25px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.faq .responsive-container-block {
min-height: 75px;
height: fit-content;
max-width: 900px;
width: 100%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
display: flex;
flex-wrap: wrap;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
justify-content: flex-start;
}
.faq .responsive-container-block.bigContainer {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
}
.faq .responsive-container-block.Container {
max-width: 1320px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
flex-direction: column;
justify-content: center;
align-items: center;
}
.faq .text-blk.heading {
font-size: 36px;
line-height: 45px;
font-weight: 700;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
text-align: center;
margin: 0 0 18px 0;
}
.faq .text-blk.subHeading {
font-size: 18px;
line-height: 30px;
color: #939393;
max-width: 610px;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 70px;
margin-left: 0px;
}
.faq .text-blk.cardHeading {
font-size: 22px;
line-height: 34px;
font-weight: 700;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 25px;
margin-left: 0px;
margin: 0 0 20px 0;
}
.faq .text-blk.cardSubHeading {
font-size: 18px;
line-height: 28px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 40px;
margin-left: 0px;
}
.faq .readMore {
font-size: 15px;
color: #ff7889;
line-height: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 58px;
margin-left: 0px;
}
.faq .readMore:hover {
cursor: pointer;
}
.faq .card {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.faq .lineDivider {
height: 1px;
width: 85%;
background-color: #707070;
}
.faq .responsive-cell-block.wk-desk-6.wk-ipadp-12.wk-tab-12.wk-mobile-12 {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 50px;
margin-left: 0px;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
.faq .responsive-container-block.allCardContainer {
padding: 0 10px 0 10px;
}
@media (max-width: 1024px) {
.faq .lineDivider {
width: 95%;
}
}
@media (max-width: 768px) {
.faq .responsive-cell-block.wk-desk-6.wk-ipadp-12.wk-tab-12.wk-mobile-12 {
padding: 0 0 0 0;
}
.faq .text-blk.heading {
font-size: 32px;
}
}
@media (max-width: 500px) {
.faq .lineDivider {
width: 100%;
}
.faq .text-blk.heading {
font-size: 30px;
line-height: 34px;
}
.faq .text-blk.subHeading {
font-size: 14px;
line-height: 20px;
margin: 0 0 45px 0;
}
.faq .responsive-container-block.allCardContainer {
padding: 0 0 0 0;
}
.faq .responsive-container-block.bigContainer {
padding: 10px 20px 10px 20px;
}
.faq .text-blk.heading {
font-size: 26px;
}
.faq .text-blk.subHeading {
font-size: 18px;
line-height: 23px;
}
.faq .text-blk.cardHeading {
font-size: 18px;
}
.faq .text-blk.cardSubHeading {
font-size: 17px;
line-height: 25px;
margin: 0 0 35px 0;
}
.faq .readMore {
font-size: 15px;
color: #ff7889;
line-height: normal;
margin: 10px 0;
text-decoration: none;
font-weight: bold;
display: inline-block;
}
.faq .readMore:hover {
text-decoration: underline;
}
}
</style>
</faqhead>
<faqbody>
<section class="faq">
<div class="responsive-container-block bigContainer">
<div class="responsive-container-block Container">
<p class="text-blk heading">Custom HTML/CSS FAQ Tool</p>
<p class="text-blk subHeading">
Easily integrate this lightweight FAQ tool built with HTML, CSS, and JavaScript into your website. </p>
<div class="responsive-container-block allCardContainer">
<div class="responsive-cell-block wk-desk-6 wk-ipadp-12 wk-tab-12 wk-mobile-12">
<div class="card">
<p class="text-blk cardHeading">Why use custom FAQ without plugins?</p>
<p class="text-blk cardSubHeading">
Using pure HTML, CSS, and JavaScript to create an FAQ section means you don't have to rely on third-party plugins that may slow down your site or break during updates. It's a clean, customizable, and plugin-free solution.
</p>
<a href=" https;// your website link here " class="readMore" >Read More</a>
<div class="lineDivider"></div>
</div>
</div>
<div class="responsive-cell-block wk-desk-6 wk-ipadp-12 wk-tab-12 wk-mobile-12">
<div class="card">
<p class="text-blk cardHeading">HTML, CSS, and JS are Lightweight</p>
<p class="text-blk cardSubHeading">
A custom FAQ built with core web technologies is extremely lightweight. Unlike plugin-heavy solutions, it doesn’t burden your page load time or require regular maintenance, making it perfect for performance-focused websites.
</p>
<a href=" https;// your website link here " class="readMore" >Read More</a>
<div class="lineDivider"></div>
</div>
</div>
<div class="responsive-cell-block wk-desk-6 wk-ipadp-12 wk-tab-12 wk-mobile-12">
<div class="card">
<p class="text-blk cardHeading">Improve SEO and UX</p>
<p class="text-blk cardSubHeading">
A well-structured FAQ section improves your website’s SEO by providing concise answers to common queries. It also enhances user experience by making information easy to find and interact with.
</p>
<a href=" https;// your website link here " class="readMore" >Read More</a>
<div class="lineDivider"></div>
</div>
</div>
<div class="responsive-cell-block wk-desk-6 wk-ipadp-12 wk-tab-12 wk-mobile-12">
<div class="card">
<p class="text-blk cardHeading">Easy to Customize Anytime</p>
<p class="text-blk cardSubHeading">
When you build with HTML, CSS, and JavaScript, you have full control over design and functionality. You can add animations, toggle effects, and change styles easily without depending on plugin developers.
</p>
<a href=" https;// your website link here " class="readMore" >Read More</a>
<div class="lineDivider"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</faqbody>
</html>
16. Clean Accordion View without Arrows
This FAQ accordion supports multiple questions, answers, and paragraphs. It features a user-friendly, clean layout interface built with HTML, CSS, and JavaScript, and is optimized for SEO. The accordion buttons have a unique hover color and respond to clicks on each question.
<!DOCTYPE html>
<html>
<faqhead>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
max-width: 700px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</faqhead>
<faqbody>
<h3>Accordion</h3>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Answer to Section 1.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Answer to Section 2.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Answer to Section 3.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</faqbody>
</html>
17. Smart FAQ with Smooth Transition
This FAQ has a smart and smooth transition when clicking on the answer, with rotating arrows. Built with HTML, CSS, and JavaScript without HTML head and body tags, this FAQ is clean and modern, responsive on all devices. It is adjustable and customizable with all themes.
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Open Sans);
.faq-heading {
font-family: Lato;
font-weight: 400;
font-size: 19px;
-webkit-transition: text-indent 0.2s;
text-indent: 20px;
color: #333;
}
.faq-text {
font-family: Open Sans;
font-weight: 400;
color: #919191;
width:95%;
padding-left:20px;
margin-bottom:30px;
}
.faq {
width: 100%;
max-width: 700px;
margin: 0 auto;
background: white;
border-radius: 4px;
position: relative;
border: 1px solid #E1E1E1;
}
.faq label {
display: block;
position: relative;
overflow: hidden;
cursor: pointer;
height: 56px;
padding-top:1px;
background-color: #FAFAFA;
border-bottom: 1px solid #E1E1E1;
}
.faq input[type="checkbox"] {
display: none;
}
.faq .faq-arrow {
width: 5px;
height: 5px;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top: 2px solid rgba(0, 0, 0, 0.33);
border-right: 2px solid rgba(0, 0, 0, 0.33);
float: right;
position: relative;
top: -30px;
right: 27px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.faq input[type="checkbox"]:checked + label > .faq-arrow {
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.faq input[type="checkbox"]:checked + label {
display: block;
background: rgba(255,255,255,255) !important;
color: #4f7351;
height: 225px;
transition: height 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.faq input[type='checkbox']:not(:checked) + label {
display: block;
transition: height 0.8s;
height: 60px;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
::-webkit-scrollbar {
display: none;
}
</style>
<div class='faq'>
<input id='faq-a' type='checkbox'>
<label for='faq-a'>
<p class="faq-heading">Question 1</p>
<div class='faq-arrow'></div>
<p class="faq-text">Answer to Question 1.</p>
</label>
<input id='faq-b' type='checkbox'>
<label for='faq-b'>
<p class="faq-heading">Question 2</p>
<div class='faq-arrow'></div>
<p class="faq-text">Answer to Question 2.</p>
</label>
<input id='faq-c' type='checkbox'>
<label for='faq-c'>
<p class="faq-heading">Question 3</p>
<div class='faq-arrow'></div>
<p class="faq-text">Answer to Question 3.</p>
</label>
<input id='faq-d' type='checkbox'>
<label for='faq-d'>
<p class="faq-heading">Question 4</p>
<div class='faq-arrow'></div>
<p class="faq-text">Answer to Question 4.</p>
</label>
<input id='faq-e' type='checkbox'>
<label for='faq-e'>
<p class="faq-heading">Question 5</p>
<div class='faq-arrow'></div>
<p class="faq-text">Answer to Question 5.</p>
</label>
</div>
18. Tomato Red Accordion (Animated)
Tomato Red Accordion is animated, clicking on the question, and with arrows. This FAQ is built with HTML, CSS, and JavaScript without using HTML head and body tags. This FAQ supports multiple questions and answers, responsive on all devices, copy-paste code.
<style>
:root {
--size-header: 2.25rem;
--size-accordion-title: 1.25rem;
--size-accordion-content: 1rem;
--animation-speed: 100;
--slide-ease: cubic-bezier(0.86, 0, 0.07, 1);
--slide-duration: calc(400ms * 100 / var(--animation-speed));
--slide-delay: calc(450ms * 100 / var(--animation-speed));
--circle-duration: calc(900ms * 100 / var(--animation-speed));
}
*,
*::before,
*::after {
position: relative;
left: 0;
top: 0;
box-sizing: border-box;
}
a,
p,
h3 {
margin: 0;
}
html {
height: 100%;
}
body {
background-color: hsl(4, 91%, 60%);
font-family: Nunito, Arial, Helvetica, sans-serif;
font-weight: 600;
margin: 0;
display: grid;
place-items: center;
padding: 2rem 2rem;
min-height: 100%;
}
html,
body {
scroll-behavior: smooth;
scroll-padding-top: 1rem;
width: 100%;
}
main > h3 {
font-size: var(--size-header);
margin-bottom: 1.25rem;
color: #fff;
}
::selection {
background-color: rgba(0, 0, 0, 0.4);
}
.accordion {
--circle-x: 1.8rem;
--circle-y: 0;
--circle-r: 200%;
--circle-bg: #fff;
color: #000;
background-color: var(--circle-bg);
max-width: 56ch;
margin-bottom: 1rem;
border-radius: min(8px, 0.5rem);
display: grid;
grid-template-rows: 0fr 0fr;
transition-timing-function: var(--slide-ease);
transition-duration: 200ms, 200ms, var(--slide-duration);
transition-property: opacity, box-shadow, grid-template-rows;
transition-delay: 0ms, 0ms, var(--slide-delay);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
opacity: 0.9;
}
.accordion:not(:target):hover {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}
.accordion:not(:target):active {
opacity: 1;
box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.3);
}
.accordion,
.content {
overflow: hidden;
}
.accordion:target {
--d: 90deg;
grid-template-rows: 0fr 1fr;
transition: grid-template-rows var(--slide-ease) var(--slide-duration)
var(--slide-delay);
}
.wrapper {
padding-block: 0 1.05rem;
padding-inline: 1.25rem;
}
.content {
font-size: var(--size-accordion-content);
line-height: 140%;
}
.content p {
margin-bottom: 1rem;
}
.content a {
color: currentColor;
font-weight: 800;
text-decoration: underline;
}
main :last-child,
.content :last-child {
margin-bottom: 0;
}
.title a {
padding: 1rem 1.25rem;
font-size: var(--size-accordion-title);
font-weight: 800;
color: currentColor;
text-decoration: none;
display: flex;
flex-direction: row;
place-items: center;
}
.title a::before {
--chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath fill='white' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
content: "";
left: 0;
top: 0;
width: 0.65rem;
aspect-ratio: 320 / 512;
display: inline-block;
margin-right: 0.75rem;
transform: rotate(var(--d, 0deg));
transition: transform var(--slide-ease) var(--slide-duration)
var(--slide-delay);
mask-image: var(--chevron-icon);
mask-size: 100% 100%;
-webkit-mask-image: var(--chevron-icon);
-webkit-mask-size: 100% 100%;
background-color: currentColor;
}
.accordion::before,
.accordion::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: var(--circle-bg);
mix-blend-mode: difference;
transform-style: preserve-3d;
transition-timing-function: ease;
transition-property: opacity, clip-path, visibility;
pointer-events: none;
clip-path: circle(var(--r) at var(--circle-x) var(--circle-y));
border-radius: inherit;
z-index: 4;
}
.accordion::before {
--r: 0%;
transition-delay: var(--circle-duration), var(--circle-duration), 0ms;
transition-duration: 0ms, var(--circle-duration), 0ms;
opacity: 0;
}
.accordion:target::before {
--r: var(--circle-r);
transition-delay: 0ms, 0ms, 0ms;
transition-duration: 0ms, var(--circle-duration), 0ms;
opacity: 1;
}
.accordion::after {
--r: var(--circle-r);
transition-delay: 0ms, 0ms, var(--circle-duration);
transition-duration: 0ms, var(--circle-duration), 0ms;
visibility: hidden;
opacity: 1;
}
.accordion:target:after {
--r: 0%;
transition-delay: 0ms, 0ms, 0ms;
transition-duration: 0ms, 0ms, 0ms;
visibility: visible;
opacity: 0;
}
.title a:focus-visible {
background-color: hsl(0, 100%, 90%);
outline: none;
}
.accordion:target .title a:focus-visible {
background-color: hsl(183, 100%, 93%);
}
</style>
<main>
<h3>Tomato Red Accordion (Animated)</h3>
<section class="accordion" id="overview">
<h3 class="title"><a href="#overview">Question 1</a></h3>
<div class="content">
<div class="wrapper">
<p>
Answer to Question 1.
</p>
</div>
</div>
</section>
<section class="accordion" id="how-does-it-work">
<h3 class="title"><a href="#how-does-it-work">Question 2</a></h3>
<div class="content">
<div class="wrapper">
<p>
Answer to Question 2.
</p>
</div>
</div>
</section>
<section class="accordion" id="inspiration">
<h3 class="title"><a href="#inspiration">Question 3</a></h3>
<div class="content">
<div class="wrapper">
<p>
Answer to Question 3.
</p>
</div>
</div>
</section>
</main>
19. Divider Accordion with Plus/Minus Icons
This FAQ is designed for question and answer collapse, expand, and hide functionality, with a clean interface. On clicking the question, the plus arrow will convert into a minus arrow. Responsive FAQ supports multiple questions and answers, best for FAQ pages.
<!DOCTYPE html>
<html lang="en">
<faqhead>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
padding: 0px;
}
.faq-container {
max-width: 700px;
margin: auto;
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.faq-container h3 {
font-size: 24px;
}
.faq-item {
border-bottom: 1px solid #ddd;
}
.faq-question {
background: none;
border: none;
width: 100%;
text-align: left;
font-size: 18px;
font-weight: bold;
padding: 15px;
cursor: pointer;
position: relative;
}
.faq-question::after {
content: '+';
position: absolute;
right: 20px;
font-size: 20px;
}
.faq-item.active .faq-question::after {
content: '-';
}
.faq-answer {
display: none;
padding: 0 15px 15px;
color: #333;
}
.faq-item.active .faq-answer {
display: block;
}
</style>
</faqhead>
<faqbody>
<div class="faq-container">
<h3>Frequently Asked Questions</h3>
<div class="faq-item">
<button class="faq-question">Question 1</button>
<div class="faq-answer">
Answer to Question 1.
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 2</button>
<div class="faq-answer">
Answer to Question 2.
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 3</button>
<div class="faq-answer">
Answer to Question 3.
</div>
</div>
</div>
<script>
const questions = document.querySelectorAll('.faq-question');
questions.forEach(question => {
question.addEventListener('click', () => {
const item = question.parentElement;
item.classList.toggle('active');
});
});
</script>
</faqbody>
</html>
Syed Sabir is a passionate blogger with over two years of experience in content creation and web development. He regularly shares free source code for tools and useful articles to help developers, students, and tech enthusiasts. Syed Sabir continues to publish new posts focused on tutorials, tools, and web solutions to support the online community.