FAQ Accordion

Streamline user experience on your website with an accordion layout for FAQs. Learn how to implement an accordion-style FAQ section to efficiently organize and display frequently asked questions.

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />



<article>
  <div>
    <header onClick="toggleItem(this)" class="active">
      <h2>What is HTML?</h2>
      <span class="material-symbols-outlined">expand_more</span>
    </header>
    <div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae
        quaerat atque eos, et recusandae quas voluptatem repellendus? Ullam,
        expedita? Sapiente molestias tenetur illo ex libero consectetur.
        Fugit labore similique temporibus.
      </p>
    </div>
  </div>
  <div>
    <header onClick="toggleItem(this)">
      <h2>What is CSS?</h2>
      <span class="material-symbols-outlined">expand_more</span>
    </header>
    <div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe
        consequatur nisi, itaque, voluptas quos, alias molestiae odio
        laboriosam incidunt rerum dicta dolorem minima repellat nostrum
        vitae! Repellat obcaecati sint cum!
      </p>
    </div>
  </div>
  <div>
    <header onClick="toggleItem(this)">
      <h2>What is JavaScript?</h2>
      <span class="material-symbols-outlined">expand_more</span>
    </header>
    <div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe
        consequatur nisi, itaque, voluptas quos, alias molestiae odio
        laboriosam incidunt rerum dicta dolorem minima repellat nostrum
        vitae! Repellat obcaecati sint cum!
      </p>
    </div>
  </div>
  <div>
    <header onClick="toggleItem(this)">
      <h2>What is ES6?</h2>
      <span class="material-symbols-outlined">expand_more</span>
    </header>
    <div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe
        consequatur nisi, itaque, voluptas quos, alias molestiae odio
        laboriosam incidunt rerum dicta dolorem minima repellat nostrum
        vitae! Repellat obcaecati sint cum!
      </p>
    </div>
  </div>
</article>

body {
  margin: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  color: rgb(255 255 255 / 90%);
  background: #606080;
  font-family: "Euclid Circular A", "Poppins";
}

article {
  background: #494964;
  width: 400px;
  padding: 20px;
  border-radius: 10px;
  display: grid;
  gap: 10px;
}

article header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 10px 0 20px;
  border-radius: 6px;
  cursor: pointer;
  background: #606080;
  color: #f8f8f8;
}

article header.active {
  background: #5c60ff;
}

article header.active span {
  rotate: -180deg;
}

article h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

article p {
  margin: 0;
  padding: 20px 10px;
  line-height: 1.7;
  font-size: 14px;
}

article span {
  transition: 0.3s;
}

article header ~ div {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}

const toggleItem = (element) => {
  const headers = document.querySelectorAll("article header");
  for (let header of headers) {
    header.classList.remove("active");
    header.nextElementSibling.style.height = "0px";
  }

  element.classList.add("active");

  const content = element.nextElementSibling;

  const text = content.querySelector("p");

  content.style.height = `${text.clientHeight}px`;
};

Enhance user experience on your website with a responsive FAQ accordion built using HTML, CSS, and JavaScript. This tutorial provides a step-by-step approach to implement and customize the accordion functionality.

Step 1: Copy the Code Snippet

Start by copying the provided HTML, CSS, and JavaScript code snippet for the FAQ accordion. This includes the structure, styles, and scripting needed to create an expandable FAQ section. Simply select the code, click the copy button, and paste it into your project files.

Step 2: Link CSS and Material Symbols Outlined Font

Ensure the necessary CSS file, including the Material Symbols Outlined font, is linked correctly in your HTML document. Add the following <link> tag in the <head> section to import the CSS styles:

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0">

Replace "styles.css" with your actual CSS file name if different.

Step 3: Customize and Make it Yours

Personalize the FAQ accordion to match your website's design and content. Modify the CSS styles and JavaScript code to adjust the accordion's appearance, animation effects, and interaction behaviors. Experiment with different colors, fonts, and transition effects to create a seamless user experience.

By following these steps, you can integrate and customize an interactive FAQ accordion on your website using HTML, CSS, and JavaScript. Make the FAQ section uniquely yours by tailoring it to fit your brand's style and user interface preferences.

Code Explanation

HTML Code

Structure Overview

<article>
  <div>
    <header onClick="toggleItem(this)" class="active">
      <h2>What is HTML?</h2>
      <span class="material-symbols-outlined">expand_more</span>
    </header>
    <div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae
        quaerat atque eos, et recusandae quas voluptatem repellendus? Ullam,
        expedita? Sapiente molestias tenetur illo ex libero consectetur.
        Fugit labore similique temporibus.
      </p>
    </div>
  </div>
  <!-- Additional sections for CSS, JavaScript, and ES6 follow with similar structure -->
</article>

<article>: Defines a container for a self-contained piece of content or an article.
<div> Elements: Each <div> contains a collapsible section with a heading (<header>) and content (<div> with <p>).

Section 1: What is HTML?

<div>
  <header onClick="toggleItem(this)" class="active">
    <h2>What is HTML?</h2>
    <span class="material-symbols-outlined">expand_more</span>
  </header>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae
      quaerat atque eos, et recusandae quas voluptatem repellendus? Ullam,
      expedita? Sapiente molestias tenetur illo ex libero consectetur.
      Fugit labore similique temporibus.
    </p>
  </div>
</div>

<header>: Acts as a clickable header that toggles the visibility of its sibling <div> containing the paragraph (<p>).
- onClick="toggleItem(this)": Calls a JavaScript function toggleItem(this) when clicked, likely toggling the active state of the section.
- class="active": Indicates this section is initially expanded (active).
- <h2>: Heading with the text "What is HTML?".
- <span>: Contains an icon or symbol (expand_more) indicating the state of the collapsible section.
<div>: Contains the content (a <p> tag with lorem ipsum text) that will be hidden or shown based on the state of the header.

Similar Sections for CSS, JavaScript, and ES6

The structure repeats for subsequent sections (What is CSS?, What is JavaScript?, and What is ES6?), differing only in their respective headings and content paragraphs (<p>).

CSS Code

Body Styles

body {
  margin: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  color: rgb(255 255 255 / 90%);
  background: #606080;
  font-family: "Euclid Circular A", "Poppins";
}

margin: 0;: Removes default margin.
display: grid;: Sets the body as a grid container.
place-items: center;: Centers the grid items (in this case, the <article>).
height: 100vh;: Makes the body height equal to the viewport height.
color: rgb(255 255 255 / 90%);: Sets the text color with 90% opacity to white.
background: #606080;: Sets the background color to a dark grayish-blue.
font-family: "Euclid Circular A", "Poppins";: Specifies the font family for the entire document.

Article Styles

article {
  background: #494964;
  width: 400px;
  padding: 20px;
  border-radius: 10px;
  display: grid;
  gap: 10px;
}

background: #494964;: Sets the background color of the <article> to a dark purple-gray.
width: 400px;: Sets the width of the <article> to 400 pixels.
padding: 20px;: Adds 20 pixels of padding inside the <article>.
border-radius: 10px;: Rounds the corners of the <article> with a 10-pixel border radius.
display: grid;: Makes the <article> a grid container.
gap: 10px;: Sets the gap between grid items (in this case, between header and content) to 10 pixels.

Header Styles

article header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 10px 0 20px;
  border-radius: 6px;
  cursor: pointer;
  background: #606080;
  color: #f8f8f8;
}

display: flex;: Turns the header into a flex container.
align-items: center;: Centers items vertically within the header.
justify-content: space-between;: Distributes items evenly with space between them horizontally.
height: 48px;: Sets the height of the header to 48 pixels.
padding: 0 10px 0 20px;: Adds padding inside the header (top: 0, right: 10px, bottom: 0, left: 20px).
border-radius: 6px;: Rounds the corners of the header with a 6-pixel border radius.
cursor: pointer;: Changes the cursor to a pointer when hovering over the header.
background: #606080;: Sets the background color of the header to a dark blue-gray.
color: #f8f8f8;: Sets the text color of the header to light gray.

Active Header Styles

article header.active {
  background: #5c60ff;
}

article header.active: Targets the header with the active class applied.
background: #5c60ff;: Changes the background color of the active header to a light blue.

Arrow Icon Animation

article header.active span {
  rotate: -180deg;
}
article span {
  transition: 0.3s;
}

article header.active span: Targets the <span> inside an active header.
rotate: -180deg;: Rotates the span 180 degrees (likely used to indicate an expanded or collapsed state).
transition: 0.3s;: Adds a smooth transition effect over 0.3 seconds when the <span> rotates.

Collapsible Content Animation

article header ~ div {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}

article header ~ div: Targets a <div> that is a sibling of a <header> inside the <article>.
position: relative;: Sets the positioning context for child elements.
height: 0;: Initially hides the content by setting its height to zero.
overflow: hidden;: Ensures any content that exceeds the hidden height is not visible.
transition: height 0.5s ease;: Animates the height change over 0.5 seconds with an ease timing function, enabling smooth expansion and collapse of content.

JavaScript Code

Selecting Headers:

const headers = document.querySelectorAll("article header");

This line selects all <header> elements within <article> elements on the page.

Collapsing All Content:

for (let header of headers) {
  header.classList.remove("active");
  header.nextElementSibling.style.height = "0px";
}

This loop iterates over each <header> element found in headers.
It removes the "active" class from each <header>.
It collapses the content (next sibling element) associated with each <header> by setting its height to "0px". This effectively hides the content.

Activating Clicked Header:

element.classList.add("active");

Adds the "active" class to the clicked <header> element (element). This marks it as active visually.

Expanding Clicked Content:

const content = element.nextElementSibling;
const text = content.querySelector("p");
content.style.height = `${text.clientHeight}px`;

Retrieves the content associated with the clicked <header> using element.nextElementSibling.
Finds the <p> element (text) within the content.
Sets the height of the content (content.style.height) to match the client height (text.clientHeight) of the <p> element. This expands the content to reveal its full height.