How to create a responsive accordion menu using html, css, JavaScript with source code

Learn how to create a very responsive accordion menu using html, css and JavaScript. Step1: Let’s create a new folder for storing the files. Step2: then create an index.html file…

Jul 8, 2022 - 19:14

0 342

How to create a responsive accordion menu using html, css, JavaScript with source code

Alpha code camp - image screenshot

How to create an accordion menu using html, css, JavaScript with source code

Table of content

About the accordion menu
Features of this accordion menu
Script file includes
Requirements
Step by step on how to create the accordion menu
How to run the downloaded source code
The screenshots

About this accordion menu

In this article, you will learn how to create an accordion menu which you can use in your projects. The collapsible accordion menu can be used to hide long contents or FAQS or articles. They give websites an easy navigation feature. This accordion menu is very responsive. This responsive accordion menu was created using css, html and javascript. Steps are below.

Features of this accordion menu

Good interface
Very easy documentation (comments are included in the source code for easy reading and editing.)
Cursor pointer
Transition (opening/ closing)
Very responsive design

Script file Includes

Javascript - functionality
HTML - structure
CSS - design

Requirements

Browser (Chrome, or other browsers).
Code/ text Editor (VS code, sublime).

Step by step on how to create the accordion menu

Create a folder on your computer and save (to store all the files we will create )
Open your code/ text editor
Then create a file named index.html and save in the folder we first created

Copy the code below and paste it in the index.html file. See code below:

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion</title>
    <link rel="stylesheet" href="style.css">
     
</head>
<body>
  <h1>Accordions</h1>
    <button class="accordion">Accordion 1</button>
    <div class="contents">
      <p>Your accordion contents...Your accordion contents...Your accordion contents...
        Your accordion contents...Your accordion contents...Your accordion contents...
        Your accordion contents...Your accordion contents...Your accordion contents...
        Your accordion contents...Your accordion contents...Your accordion contents... </p>
    </div>
    
    <button class="accordion">Accordion 2</button>
    <div class="contents">
      <p>Your accordion contents...Your accordion contents...Your accordion contents...
        Your accordion contents...Your accordion contents...Your accordion contents...
        Your accordion contents...Your accordion contents...Your accordion contents...
        Your accordion contents...Your accordion contents...Your accordion contents... </p>
    </div>
    
    <button class="accordion">Accordion 3</button>
    <div class="contents">
      <p>Your accordion contents...Your accordion contents...Your accordion contents...
        Your accordion contents...Your accordion contents...Your accordion contents...
        Your accordion contents...Your accordion contents...Your accordion contents...
        Your accordion contents...Your accordion contents...Your accordion contents... </p>
    </div>
    <script src="script.js"></script>
</body>
</html>

In other to design it, we create another file named style.css in the same folder we created.

STYLE.CSS

/*header*/
h1 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
/* To design the accordion buttons for opening and closingStyle the buttons that are used to open and close the accordion contents */
.accordion {
    text-align: left;
    background-color: #000032;
    color: white;
    cursor: pointer;
    border: 2px solid white;
    padding: 20px;
    width: 100%;   
    font-size: 15pt;
}

/* To add a background color to the button if the mouse is over it or if it is clicked */
.accordion:hover, .accordion.active {
    background-color: #000032ce;
}

/* To hide the accordion contents */
div.contents {
    padding: 0 19px;
    background-color: white;
    display: none;
    font-family: Arial, Helvetica, sans-serif;
}

/* To show the hidden accordion contents when clicked*/
div.contents.show {
    display: block !important;
}
.accordion:after {
    content: '\02795'; 
    float: right;
    font-size: 14px;
    margin-left: 6px;    
}

.accordion.active:after {
    content: "\2796"; 
  
}

To give it the collapsible feature (open and close) – we create another file named script.js in the same folder with others.

SCRIPT.JS

let acd = document.getElementsByClassName("accordion");
let a;

for (a = 0; a < acd.length; a++) {
    acd[a].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

After that, run the index.html file on your browser and you will see the output like the image below

accordion image

How to run the downloaded source code

The zipped file of this code is attached to this article below; it can be downloaded from there.

Below this you will see the attached zipped file.
Then click on the attached zipped file to download it.
Go to downloads folder on your computer and unzip/ extract it.
Open the unzipped folder and double click on the index.html file to open it in your browser or
You can open the code with your code/ text editor and modify.