How to Build Accordion Menu using JavaScript ?

Last Updated : 23 Jul, 2024

Accordion is used to render or hide, or toggle the view of the content with the help of adding the collapsible effect. It helps to manage and organize information in a compact and visually appealing manner. Accordion Menu may contain nested accordions, in order to render a large volume of content in an organized & systematic format. In this article, we will demonstrate how a dynamic accordion can be built using JavaScript. Here, the accordion will contain some titles and descriptions, along with the feature of adding more items to it. The accordion will finally look similar to the below image:

Screenshot-from-2023-07-06-14-08-43 — Dynamic Accordion Sample Image

Prerequisites:

Approach:

The below approach will be utilized to create the accordion menu with the dynamic feature to include it in the accordion:

Create the <div> that has the accordion class that will contain different input fields and button tags defined with class names and IDs.
Add the different styling properties to the accordion using classes and elements that will define the padding, margin, font sizes to text, alignments, colors, etc to the specific elements.
In JavaScript, define 2 arrays that will contain the title & description details, & declare the loadItems() method to render the initial items in the array/ list using JavaScript array.map() method.
The addItem() method is defined for adding the new custom topics and their description input by the user with the input validation.
Now, create the createItem() method that is utilized to declare for creating each component whether custom or predefined items with the help of the createElement(), classlist() & appendChild() methods, in order to insert it into the Html DOM. Here, the user simply needs to click on individual topics to expand the description part and also can set more custom topics in the accordion.

Project Structure:

Screenshot-from-2023-07-06-12-54-03 — Project Structure

Example: This example describes the basic implementation for creating the accordion menu using JavaScript.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1" />
    <link href="style.css" 
          rel="stylesheet" />
    <script src="script.js"></script>
</head>

<body>
    <!-- Card container for project -->
    <div class="card">
      
        <!-- Heading or title -->
        <h2>Dynamic Accordion using JavaScript</h2>

        <!-- container for accordion items -->
        <div class="accordion" 
             id="menu"></div>

        <!-- Input for new item -->
        <div class="add">
            <h3>Add Custom</h3>
            <input type="text" 
                   id="title" 
                   placeholder="Title" />
            <input type="text" 
                   id="description"
                   placeholder="Description" />
            <button type="submit" 
                    onclick="addItem()">
                Add Item
            </button>
        </div>
    </div>
</body>

</html>

CSS