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…
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
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.
Screenshots
Expanded accordion menu