Create a simple accordion using HTML, CSS and JavaScript

Posted on January 16, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com

Preview :

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque suscipit, necessitatibus fuga quae eaque est non omnis sed maxime eos. Nobis sunt unde fuga possimus perferendis, dolores aspernatur voluptatibus ducimus eos similique cupiditate et tempora sed expedita enim harum quidem esse excepturi ut assumenda nesciunt suscipit. Tempora, adipisci sapiente! Eaque.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate molestias voluptates, facilis eius eligendi obcaecati commodi. Obcaecati, repellat veritatis modi libero error ut similique enim incidunt, perferendis dolorum id exercitationem, sunt ea voluptatibus laborum necessitatibus corporis autem deleniti dolores? Dignissimos amet reprehenderit voluptas recusandae quos? Corrupti laudantium vero facere inventore consequatur maxime iure, minima perferendis voluptatem. Quis voluptates omnis consequuntur.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, incidunt a inventore vero sed delectus ipsam quos. Possimus, sequi accusamus animi vero pariatur aliquam illo repellendus laboriosam quidem mollitia omnis voluptas inventore, consequuntur perspiciatis illum hic ratione obcaecati minus sunt itaque excepturi commodi a quisquam cum! Rem consequatur nostrum, magnam facilis vitae ullam esse numquam, tenetur earum unde officiis et. Consequuntur error non provident delectus.

Create Accordion in HTML :

What is an accordion in HTML?

=> Our awesome, accordion list HTML gives visitors an attractable accordion that contains texts and it reveals text on click.

How can I use this accordion in HTML?

=> You can easily copy the code or can download the code from our website and can simply paste it anywhere.

Do I need to know how to code?

=> No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your accordion. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.

Is it safe to use the accordion in html?

=> Yes, it's completely safe to use the accordion html.

What are the advantages of the accordion html?

=> Accordion is a very good way for hiding content and shows it on click.

How can I download the source code of accordion html?

=> Scroll the page to the bottom there you will find our download button to download the code.

Overview of the Blog :

=> In this blog, you can learn, how to make an accordion using HTML, CSS, and JavaScript By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. The accordion is a lightweight and easy-to-use HTML, CSS, and JavaScript code that creates an accordion for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our accordion using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section] and from the last section You can download the source code.

You might like this :

Glowing Button Pure HTML budget caltulator Social media icons with hover effect

<!DOCTYPE html>
                <html>
                <head>
                <title>Accordion using HTML,CSS and JavaScript - Code With Bishal</title>
                <style>
                    .accordion{
                    width: 100%;
                    background-color: whitesmoke;
                    text-align: left;
                    border: none;
                    padding: 15px 20px;
                    font-size: 18px;
                    cursor: pointer;
                    transition: background-color 0.2s linear;
                    }
                    .accordion:hover,.accordion:focus{
                    outline: none;
                    background-color: #ddd;
                    }
                    .accordion-content {
                    background-color: white;
                    border-left: 1px solid whitesmoke;
                    border-right: 1px solid whitesmoke;
                    padding: 0 20px;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.2s ease-in-out;
                    } </style>
                </head>
                
                <body>
                <button class="accordion">1st Accordion</button>
                <div class="accordion-content">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque suscipit, necessitatibus fuga quae eaque est non omnis sed maxime eos. Nobis sunt unde fuga possimus perferendis, dolores aspernatur voluptatibus ducimus eos similique cupiditate et tempora sed expedita enim harum quidem esse excepturi ut assumenda nesciunt suscipit. Tempora, adipisci sapiente! Eaque. </p>
                </div>
                <button class="accordion">2nd Accordion</button>
                <div class="accordion-content">
                <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate molestias voluptates, facilis eius eligendi obcaecati commodi. Obcaecati, repellat veritatis modi libero error ut similique enim incidunt, perferendis dolorum id exercitationem, sunt ea voluptatibus laborum necessitatibus corporis autem deleniti dolores? Dignissimos amet reprehenderit voluptas recusandae quos? Corrupti laudantium vero facere inventore consequatur maxime iure, minima perferendis voluptatem. Quis voluptates omnis consequuntur. </p>
                </div>
                <button class="accordion">3rd Accordion</button>
                <div class="accordion-content">
                <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, incidunt a inventore vero sed delectus ipsam quos. Possimus, sequi accusamus animi vero pariatur aliquam illo repellendus laboriosam quidem mollitia omnis voluptas inventore, consequuntur perspiciatis illum hic ratione obcaecati minus sunt itaque excepturi commodi a quisquam cum! Rem consequatur nostrum, magnam facilis vitae ullam esse numquam, tenetur earum unde officiis et. Consequuntur error non provident delectus. </p>
                </div>
                <script>
                    const cwb = document.querySelectorAll(".accordion");
                    cwb.forEach((accordion) => {
                    accordion.onclick = function () {
                    this.classList.toggle("open");
                    let content = this.nextElementSibling;
                    if (content.style.maxHeight) {
                    content.style.maxHeight = null;
                    } else {
                    content.style.maxHeight = content.scrollHeight + "px";
                    }
                    };
                    });
                    </script>
                </body>
                </html>

Step by step guide of creating HTML Accordion (If you want to make a image filter with animation click Here ) :

Step 1

=> Add the Broiler plate of HTML

              

<!DOCTYPE html>

<html>

<head>

<title>Accordion - Code With
Bishal</title>

</head>

<!-- created by Code With Bishal - www.codewithbishal.com
-->

<body>

</body>

</html>

Step 2)

=> Add CSS (External or Internal)

If you are using External css then create a file

                
                    style.css

And add code :

                
        <link rel="stylesheet" href="style.css">

If you want to use Internal CSS than add

                <style>   </style>

tag Between

                <head>   </head>

tag then add the CSS code between style tag:


.accordion{ 

width: 100%; /* change this to change the width of accordion button*/

background-color: whitesmoke; /* change this to change the background colour*/

text-align: left; /* change this to change the text alignment */

border: none; /* Border hidden */

padding: 15px 20px; /* change this to change the padding */

font-size: 18px; /* change this to change the font size */

cursor: pointer; /* cursor property pointer */

transition: background-color 0.2s linear; /* change this to change transition property or delay */

}

then add

                
.accordion:hover,.accordion:focus{ 

outline: none; /* Button on click no outline */
 
background-color: #ddd; /* Button on click and on hover change colour */

}

Then style the content inside the accordion

 
.accordion-content {

background-color: white; /* Change this to change background color of content */

border-left: 1px solid whitesmoke; /* Left side border width and colour */

border-right: 1px solid whitesmoke; /* Right side border width and colour */


padding: 0 20px; /* padding */


max-height: 0;

overflow: hidden; /* Overflow hidden */


transition: max-height 0.2s ease-in-out;

}

Step 3)

Add JavaScript (Internal or external)

If you are using Internal script then add the JavaScript code (copy from below) in between :

                
                    <script>   </script>

tag and If you are using external JavaScript then create a file

                
                    app.js

and add :

                
        <script src="app.js"></script>

In your HTML file

OR copy the code from below

Step 1) Add your HTML Code -

HTML Code

              
<!DOCTYPE html>

<html>

<head>

<title>Accordion using HTML,CSS and JavaScript - Code With
Bishal</title>

</head>

<!-- created by Code With Bishal - www.codewithbishal.com
-->

<body>

<button class="accordion">1st Accordion</button>

<div class="accordion-content">

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque suscipit, necessitatibus fuga quae eaque est non omnis sed maxime eos. Nobis sunt unde fuga possimus perferendis, dolores aspernatur voluptatibus ducimus eos similique cupiditate et tempora sed expedita enim harum quidem esse excepturi ut assumenda nesciunt suscipit. Tempora, adipisci sapiente! Eaque.
</p>

</div>

                 
<button class="accordion">2nd Accordion</button>

<div class="accordion-content">

<p>

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate molestias voluptates, facilis eius eligendi obcaecati commodi. Obcaecati, repellat veritatis modi libero error ut similique enim incidunt, perferendis dolorum id exercitationem, sunt ea voluptatibus laborum necessitatibus corporis autem deleniti dolores? Dignissimos amet reprehenderit voluptas recusandae quos? Corrupti laudantium vero facere inventore consequatur maxime iure, minima perferendis voluptatem. Quis voluptates omnis consequuntur.
</p>

</div>


<button class="accordion">3rd Accordion</button>

<div class="accordion-content">

  <p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, incidunt a inventore vero sed delectus ipsam quos. Possimus, sequi accusamus animi vero pariatur aliquam illo repellendus laboriosam quidem mollitia omnis voluptas inventore, consequuntur perspiciatis illum hic ratione obcaecati minus sunt itaque excepturi commodi a quisquam cum! Rem consequatur nostrum, magnam facilis vitae ullam esse numquam, tenetur earum unde officiis et. Consequuntur error non provident delectus.
</p>

</div>

</body>

</html>

Copy Contents

Step 2) Add your CSS Code -

CSS Code

              
<style>

.accordion{

 width: 100%;

 background-color: whitesmoke;

 text-align: left;

 border: none;

 padding: 15px 20px;

 font-size: 18px;

 cursor: pointer;

 transition: background-color 0.2s linear;

 }

 .accordion:hover,.accordion:focus{

 outline: none;

 background-color: #ddd;

 }

.accordion-content {

  background-color: white;

  border-left: 1px solid whitesmoke;

  border-right: 1px solid whitesmoke;

  padding: 0 20px;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-in-out;

}
</style>

Copy Contents

Step 3) Add your JavaScript Code -

JavaScript Code

                
<script>

const cwb = document.querySelectorAll(".accordion");

cwb.forEach((accordion) => {

accordion.onclick = function () {

this.classList.toggle("open");

let content = this.nextElementSibling;

if (content.style.maxHeight) {

content.style.maxHeight = null;

} else {

content.style.maxHeight = content.scrollHeight + "px";

}

};

});

</script>

Copy Contents

Download Source Code

Create a simple accordion using HTML, CSS and JavaScript

Preview :

Create Accordion in HTML :

You might like this :

Step by step guide of creating HTML Accordion (If you want to make a image filter with animation click Here ) :

Step 1

=> Add the Broiler plate of HTML
`<!DOCTYPE html> <html> <head> <title>Accordion - Code With Bishal</title> </head>  <body> </body> </html>`

Step 2)

=> Add CSS (External or Internal)

If you are using External css then create a file

And add code :

If you want to use Internal CSS than add

tag Between

tag then add the CSS code between style tag:

then add

Then style the content inside the accordion

Step 3)

Add JavaScript (Internal or external)

If you are using Internal script then add the JavaScript code (copy from below) in between :

tag and If you are using external JavaScript then create a file

and add :

In your HTML file

OR copy the code from below

Step 1) Add your HTML Code -

Step 2) Add your CSS Code -

Step 3) Add your JavaScript Code -