How to Create Accordion with HTML, CSS and Javascript?

In this tutorial, we will create accordion with Html, CSS and Javascript.

Let’s start with HTML code.

<div class="container">
  <div class="accordion">
    <section>
      <div class="tab">Tab1</div>
      <div class="box">
        <h1>TAB 1</h1>
        <p>This is TAB 1 dolor sit amet consectetur adipisicing elit.
           Explicabo dolor vero dolorum, vel perspiciatis veniam commodi
           velit quae corporis possimus temporibus nisi. Praesentium neque
           minima mollitia aut velit ipsa quae?
         </p>
       </div>
     </section>
     <section>
       <div class="tab">Tab2</div>
       <div class="box">
         <h1>TAB 2</h1>
           <p>This is TAB 2 dolor sit amet consectetur adipisicing elit.
              Explicabo dolor vero dolorum, vel perspiciatis veniam commodi
              velit quae corporis possimus temporibus nisi. Praesentium neque
              minima mollitia aut velit ipsa quae?
            </p>
         </div>
        </section>
        <section>
          <div class="tab">Tab3</div>
          <div class="box">
            <h1>TAB 3</h1>
            <p>This is TAB 3 dolor sit amet consectetur adipisicing elit.
               Explicabo dolor vero dolorum, vel perspiciatis veniam commodi
               velit quae corporis possimus temporibus nisi. Praesentium neque
               minima mollitia aut velit ipsa quae?
            </p>
          </div>
        </section>
        <section>
          <div class="tab">Tab4</div>
          <div class="box">
            <h1>TAB 4</h1>
            <p>This is TAB 4 dolor sit amet consectetur adipisicing elit.
               Explicabo dolor vero dolorum, vel perspiciatis veniam commodi
               velit quae corporis possimus temporibus nisi. Praesentium neque
               minima mollitia aut velit ipsa quae?
             </p>
           </div>
      </section>
  </div>
</div>

Now let’s get our base CSS style.

html{
    box-sizing: border-box;
}
*,
*::before,
*::after{
    box-sizing: inherit;
}
body{
    margin: 0;
    padding: 0;
}

Now let’s center our element horizontally.

.container{
    width: 800px;
    margin: 150px auto;
}

Now let’s display tab button horizontally with display: inline-block and style it.

.accordion{
    width: 100%;
    position: relative;
}

section{
    display: inline;
}
section .tab{
    display: inline-block;
    width: 24.6%;
    font-size: 32px;
    line-height: 50px;
    text-align: center;
    background-color: #FFEBC1;
    cursor: pointer;
}

As you can see tab buttons are not displayed horizontally yet. This is because of .box classes which h1 and p elements.

Let’s give the position:absolute that will stack them on top of each other.

.box will position in relation to to its parent element .accordion. We have already given position: relative to .accordion class in above code snippet.

Let’s also style .box h1 and p elements.

Related article What Is Positioning Elements In CSS?

section .box{
    position: absolute;
    padding: 15px;
    background-color: #F9C555;
}
.box h1{
    font-size: 28px;
}
.box p{
    font-size: 20px;
}

Now we want .box to be displayed only when it’s respective tab button is clicked.

So here we have to do couple of things.

First we will add display:none to .box class. That will make all our .box disappear.

And we will create .active class with display:block property. Therefore only elements with .active class will be visible.

Now in HTML add .active class to both .tab and .box of Tab 1.

HTML

…………………. truncated for brevity……………….

<section>
  <div class="tab active">Tab1</div>
  <div class="box active">
    <h1>TAB 1</h1>
    <p>This is TAB 1 dolor sit amet consectetur adipisicing elit.
       Explicabo dolor vero dolorum, vel perspiciatis veniam commodi
       velit quae corporis possimus temporibus nisi. Praesentium neque
       minima mollitia aut velit ipsa quae?
    </p>
  </div>
</section>

…………………. truncated for brevity……………….

CSS

…………………. truncated for brevity……………….

section .box{
    position: absolute;
    display: none;
    padding: 15px;
    background-color: #F9C555;
}
section .active{
    background: #F9C555;
}
.box.active{
    display: block;
}

…………………. truncated for brevity……………….

Now let’s add javascript to our accordion.

let tab = document.querySelectorAll('.tab');
let accord = document.querySelector('.accordion');
let accord_1 = [...accord.children];

tab.forEach(function(ele,i){
    ele.addEventListener('click', function(e){
         accord_1.forEach(function(ele,j){
            if(i === j){
                accord_1[i].children[0].classList.add('active');
                accord_1[i].children[1].classList.add('active');
            }else{
                accord_1[j].children[0].classList.remove('active');
                accord_1[j].children[1].classList.remove('active');
            }
        })
 
    })
})