How to Create Custom Accordion Using HTML, CSS, and JavaScript – Tutorial

Accordions are a popular UI pattern used to organize content in collapsible sections. They’re perfect for FAQs, content toggles, and mobile-friendly layouts. In this tutorial, we’ll walk through how to create a custom accordion using HTML, CSS, and JavaScript—no libraries, no frameworks, just clean code.

📦 Step 1: HTML Structure

We begin by defining the accordion layout. Each accordion block contains a clickable header and a hidden content section. The data attributes help us link headers to their respective content blocks.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="accordion-container">
  <div class="accordion-block">
    <div class="head-block" data="content1">
      Accordion 1
    </div>
    <div class="content" data-content="content1">
      <p>Lorem Ipsum is simply dummy text...</p>
    </div>
  </div>
  <div class="accordion-block">
    <div class="head-block" data="content2">
      Accordion 2
    </div>
    <div class="content" data-content="content2">
      <p>Lorem Ipsum is simply dummy text...</p>
    </div>
  </div>
  <div class="accordion-block">
    <div class="head-block" data="content3">
      Accordion 3
    </div>
    <div class="content" data-content="content3">
      <p>Lorem Ipsum is simply dummy text...</p>
    </div>
  </div>
  <div class="accordion-block">
    <div class="head-block" data="content4">
      Accordion 4
    </div>
    <div class="content" data-content="content4">
      <p>Lorem Ipsum is simply dummy text...</p>
    </div>
  </div>
</div>
  

This structure is clean and scalable. You can add or remove accordion blocks without changing the JavaScript logic.

🎨 Step 2: CSS Styling

Next, we style the accordion using CSS. We use flexbox for layout, transitions for smooth toggling, and active classes for visual feedback.

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}
.accordion-container {
  width: 450px;
  max-width: 100%;
  padding: 10px;
  box-shadow: 0px 0px 10px #0000000d;
  border-radius: 10px;
  row-gap: 10px;
  display: flex;
  flex-wrap: wrap;
}
.head-block {
  margin: 0;
  font-size: 16px;
  padding: 10px 10px;
  background: #dfdfdf;
  color: #000;
  cursor: pointer;
}
.head-block:hover {
  background: #778eff;
  color: #fff;
}
.head-block.active {
  background: #778eff;
  color: #fff;
}
.accordion-block {
  width: 100%;
}
.accordion-block .content {
  padding: 10px 10px;
  font-size: 15px;
  line-height: 22px;
  border: 1px solid #778eff;
  display: none;
}
.accordion-block .content.active {
  display: block;
}
.accordion-block .content p {
  margin: 0;
}
  

The .active class toggles visibility and styling. We use display: none and display: block to show/hide content.

⚙️ Step 3: JavaScript Functionality

Now we add interactivity using JavaScript. When a header is clicked, it activates the corresponding content block and deactivates others.

var tabs = document.getElementsByClassName("head-block");
var content = document.getElementsByClassName("content");
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function (e) {
    for(var j = 0; j < tabs.length; j++){
      tabs[j].classList.remove("active");
      content[j].classList.remove("active");
    }
    var targetContent = e.target.getAttribute("data");
    e.target.classList.add("active");
    document.querySelector("[data-content='"+targetContent+"']").classList.add("active");
  });
}
  

This script loops through all headers and content blocks. It removes the active class from all elements, then adds it to the clicked header and its matching content block.

📚 Understanding the Technologies

HTML

HTML provides the structure. Each accordion block is a reusable component. The data attributes act as identifiers for linking headers to content.

CSS

CSS handles the visual presentation. We use flexbox for layout, transitions for smooth interaction, and hover/active states for feedback.

JavaScript

JavaScript adds behavior. It listens for click events and dynamically updates the DOM to show or hide content blocks.

📱 Making It Responsive

To make your accordion mobile-friendly, you can use media queries to adjust padding, font size, and layout. Consider stacking accordion blocks vertically and increasing touch targets for better usability.

🧩 Use Cases for Accordions

• FAQ sections
• Terms & conditions toggles
• Product feature breakdowns
• Mobile menus
• Collapsible form sections

🛠️ Tips for Enhancement

• Add icons to indicate open/close state
• Use smooth transitions with max-height and overflow
• Include ARIA attributes for accessibility
• Allow multiple sections to stay open (optional)
• Animate content reveal with CSS transitions

🔗 Live Demo

You can view the working demo at code.bydev24.com/snippets/accordion