Create an Interactive FAQ Accordion with HTML, CSS and JavaScript

A FAQ accordion is an effective way to display frequently asked questions and answers on your website. It provides a user-friendly way for visitors to find information without overwhelming them with text. This tutorial walks you through creating a stylish and functional FAQ accordion using HTML, CSS and JavaScript. By the end of this guide, you’ll have a fully interactive FAQ section that can enhance the usability and aesthetics of your site.

In this tutorial, we build a modern FAQ accordion with a clean design and smooth transitions. Let’s break down the structure and styling used in this example and how you can customize it for your own needs.

Also Read: Enhancing User Accessibility: Glassmorphism Login Form using CSS 

HTML Structure

The HTML markup sets up a basic structure for the FAQ accordion. We use an unordered list (<ul>) to contain all the FAQ items. Each FAQ item is a list item (<li>) that holds a <div> with the details class for the collapsible section. Inside this details div, we have:

<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: A clickable element that reveals or hides the answer. It displays the question and has a small icon indicating the expand/collapse action.
• content: The section that contains the answer. Initially hidden, it becomes visible when the user clicks on the summary.

This structure allows us to manage multiple FAQs in a clean and organized manner.

CSS Styling

The CSS styles focus on creating an attractive and functional accordion. 

@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: linear-gradient(#03050c, black, #0b1225);
}

.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);
}

• The "accordion" class sets up the layout with a flexbox design, ensuring the accordion items are spaced out and responsive.
• Details is styled with rounded corners, a subtle border and a background gradient to create a modern look.
• Summary has styles for text color, cursor and spacing to make it easy to read and interact with. On hover it changes the text color on hover for better user interaction.
• The ::after pseudo-element adds an arrow icon that rotates when the accordion is expanded, providing a visual cue for the user.
• The "content" class is hidden by default and its height is animated smoothly when the "details" class changes state.

These styles are carefully crafted to ensure the FAQ accordion is not only visually appealing but also functional and responsive.

JavaScript Functionality

The JavaScript code handles the accordion’s expand/collapse functionality. It listens for click events on the summary elements:

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
  })
})

• When a summary is clicked, it toggles the open class on the parent details element.
• It adjusts the height of the content based on whether the accordion is open or closed, using the scrollHeight property for smooth transitions.

This script ensures that only one FAQ answer is visible at a time, enhancing the user experience by preventing multiple sections from being expanded simultaneously.

Creating a FAQ accordion is a great way to organize information and improve the user experience on your website. This tutorial provided a comprehensive guide on building a modern, responsive FAQ accordion using HTML, CSS and JavaScript.

Also Read: Weather Web App using HTML CSS JavaScript | Fully Responsive 

You now have a template that combines aesthetic appeal with practical functionality. The clean design, smooth transitions and intuitive layout make this accordion an excellent addition to any website. You can easily customize the styles and content to fit your specific needs, whether you’re building a personal blog, a business site or a product page.

By integrating this FAQ accordion, you can present your frequently asked questions in a way that is both engaging and easy to navigate, helping to keep your users informed and satisfied.

Download