The Custom FAQ Accordion is an elegant and user-friendly component that allows you to display multiple questions and answers in a compact, interactive format. This component enhances the user experience by letting visitors expand only the questions they are interested in, keeping your website clean and organized.
HTML Structure
The accordion is structured using an unordered list (<ul>) containing multiple list items (<li>). Each list item wraps a .details container, which contains a .summary for the question and a .content for the answer.
<ul class="accordion">
<li>
<div class="details">
<div class="summary">What is the purpose of this service?</div>
<p class="content">Our service provides high-quality landing page designs that help businesses create a strong
online presence. We focus on responsive design, user experience, and conversion optimization to ensure your
landing page meets your goals.</p>
</div>
</li>
<li>
<div class="details">
<div class="summary">What is included in the landing page design package?</div>
<p class="content">The landing page design package includes a custom design tailored to your requirements, a
responsive layout for all devices, and up to three rounds of revisions. You will also receive the HTML/CSS
files and support during the implementation phase.</p>
</div>
</li>
<li>
<div class="details">
<div class="summary">How long does it take to complete a landing page?</div>
<p class="content">The design process typically takes between 7 to 10 business days, depending on the complexity
of the project and the responsiveness of the client in providing feedback. If you have a specific deadline,
please let us know in advance.</p>
</div>
</li>
<li>
<div class="details">
<div class="summary">Can you help with the implementation of the landing page?</div>
<div class="content">Yes, we offer additional services for the implementation of the landing page, including
setting up the page on your website and integrating with your existing systems. Please contact us for more
details and pricing.</div>
</div>
</li>
<li>
<div class="details">
<div class="summary">What information do you need from me to start the project?</div>
<div class="content">We will need details about your business goals, target audience, branding guidelines, and
any specific features or content you want on the landing page. A detailed brief will help us create a design
that meets your expectations.</div>
</div>
</li>
</ul>.summary: The clickable element showing the question. It also contains an arrow icon that rotates on expansion..content: The answer section that expands when the summary is clicked.
This structure ensures semantic HTML and is easy to maintain.
CSS Styling
This custom FAQ Accordion uses a dark theme with subtle gradients and rounded borders to create a modern, sleek design. Key styling features include:
@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);
@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);
body {
color: white;
display: flex;
min-height: 100vh;
justify-content: center;
font-family: 'Baloo bhai 2';
background: black;
}
.accordion {
display: flex;
gap: 20px;
width: 600px;
padding: 15px;
list-style: none;
margin-top: 100px;
border-radius: 10px;
height: max-content;
flex-direction: column;
}
.details {
border-radius: 15px;
padding: 10px 15px;
border: 1px solid #121726f7;
background: linear-gradient(291deg, black, #070c13, black);
}
.summary {
display: flex;
color: white;
line-height: 1.5;
cursor: pointer;
gap: 10px;
align-items: center;
border-radius: 10px;
justify-content: space-between;
}
.details.open .summary,
.summary:hover {
color: #99ecec;
}
.summary::after {
content: '\F282';
transition: transform .3s;
font-size: 12px;
font-family: 'bootstrap-icons';
}
.content {
height: 0;
overflow: hidden;
font-size: 15px;
transition: height .3s;
color: rgb(198 198 198);
}
.details.open .summary::after {
transform: rotate(180deg);
}- Smooth expansion: The content height transitions smoothly for an appealing open/close effect.
- Hover effect: Questions highlight on hover, improving interactivity.
- Arrow icon animation: The arrow rotates to indicate open or closed state.
These styles give the FAQ section a polished look while maintaining readability.
JavaScript Functionality
The custom FAQ accordion uses a simple JavaScript script to toggle open and closed states:
document.querySelectorAll('.summary').forEach((elem) => {
elem.addEventListener('click', () => {
const content = elem.parentElement.querySelector('.content')
const isOpen = elem.parentElement.classList.toggle('open');
content.style.height = isOpen ? content.scrollHeight + "px" : 0
})
})- Clicking a question expands or collapses the answer.
- The content height adjusts dynamically to match the text inside.
- The arrow rotates to indicate the toggle state.
This approach ensures smooth, responsive behavior without relying on heavy libraries.
Use Cases
- FAQ sections: Perfect for websites that need to answer common user questions.
- Support portals: Organize knowledge base articles or help guides.
- Product descriptions: Highlight features, specifications, or instructions in collapsible sections.
Benefits
- Keeps your webpage organized and clutter-free.
- Improves user experience by allowing quick access to relevant information.
- Mobile-friendly and responsive with minimal code.
Final Thoughts
The Custom FAQ accordion component combines clean design, smooth animations, and easy interactivity, making it a valuable addition to any modern website. Its lightweight structure ensures fast loading and responsiveness across all devices.
