How To Create Accordion Using HTML, CSS, and JavaScript?

What is an Accordion In HTML?

An Accordion is an element in the website that consists of a vertically stacked list that can be expanded or collapsed to reveal the actual content. Basically, an accordion is used to show or hide the content on a website.

These Accordions can be used while creating Frequently Asked Questions section on your website.

Software Requirements

To accomplish this project we need a Code Editor or IDE and a Web Browser. The Code Editor or IDE helps to write code for creating our project while the web browser helps to render those code and make theme presentable.

For this project, we will use a lightweight code editor by Microsoft, Visual Studio Code, and Google Chrome as a web browser.

Project Folder Structure

Once you’ve finished installing the software create a folder in your computer drive and open the folder inside the code editor (visual studio code).

Now create a new folder and name it as assets. This folder consists of all the files such as CSS, js, etc that are required for our project.

Inside the assets, folder create two sub-folder and name them CSS & JS respectively.

Visual Representation for folder structure.

assets/
├── css/
│   ├── style.css
└── js/
    ├── script.js

Section A : Creating Structure For Website

In this section, we will create a structure for our website. Here we will implement the HTML. All the codes are written inside the “index.html” file.

The HTML code can be used from the code snippets below.

<!DOCTYPE html>
<html>
    <head>
        <title>Creating a Simple Accordian Using HTML and CSS</title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
        <button class="accordian">Section One</button>
        <div class="panel">
            <p>Lorem12 ipsum dolor sit amet consectetur, adipisicing elit. Maxime amet distinctio, magnam quo cum
                consequuntur explicabo,
                repudiandae ullam tenetur perferendis eligendi ad delectus, quibusdam assumenda excepturi voluptas
                voluptate iste nisi.
            </p>
        </div>

        <button class="accordian">Section Two</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime amet distinctio, magnam quo cum
                consequuntur explicabo,
                repudiandae ullam tenetur perferendis eligendi ad delectus, quibusdam assumenda excepturi voluptas
                voluptate iste nisi.
            </p>
        </div>

        <button class="accordian">Section Three</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime amet distinctio, magnam quo cum
                consequuntur explicabo,
                repudiandae ullam tenetur perferendis eligendi ad delectus, quibusdam assumenda excepturi voluptas
                voluptate iste nisi.
            </p>
        </div>
     <script type="text/javascript src="js/script.js"></script>
    </body>
</html>

Section B : Styling The HTML Structure

In this section we will write css code to style all the HTML elements inside the index.html file. All these styles will be written inside the style.css file.

You can use the css code from the code snippets below.

body{
    font-family: 'Roboto', sans-serif;
    margin: 10% auto;
    width: 50%;
    background-color: #0D3E80;
    color: #fff;
}

.accordian{
    background-color: #fff;
    border: none;
    color: #444;
    cursor: pointer;
    padding: 20px;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 17px;
    transition: 0.5s ease-in;
}

.accordian:after{
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
}

.active:after {
    content: "\2212";
  }

.active, .accordian:hover{
    background-color: #335480;
    color: #fff;
}

.panel{
    padding: 0 15px;
    background-color: #197DFF;
    display: none;
    overflow: hidden;
}

Section C : Implementing JavaScript

In this section we will use JavaScript programming language. With the help of JavaScript we will make our accordion fully functional. These js code are written inside the script.js file.

In order to implement js for the project you can use the code from the snippet below.

var accordian = document.getElementsByClassName("accordian");

for (var i = 0; i < accordian.length; i++) {
    accordian[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }

    });
}

Video Tutorial: How To Create Accordion In HTML Websites?

Conclusion

Creating an accordion is not difficult as we think. We can implement these steps and create the accordion easily. Is this article helpful? Please let us know.

If you have any queries regarding our articles, the please feel free to inform us and we will be happy to answer your queries. You can reach to us via our mailing address codersrecipe@gmail.com.