How to build CSS accordion?

This image is taken from google search.

Today am going to teach you how to build CSS3 accordion via step by step guide. I hope you are familiar with the CSS3 accordions.

Here are the steps to build CSS3 accordion.

1. Create a index.html file.

Create index.html file in a empty folder

2. Open that file in your favorite editor.

3. Paste this html code in index.html file.

<h1 class="accordion">Heading 1</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dicta cupiditate libero accusamus, voluptatibus, itaque cum ad quisquam. Illum nisi ea iure neque. Fuga commodi cumque quam, doloremque in explicabo. </p>
<h1 class="accordion">Heading 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, vitae, ipsam! Totam unde, eius autem reprehenderit assumenda iure illum aliquid, modi alias sed voluptatem enim suscipit corporis accusamus eaque aut!</p>

4. Now you have your html structure setup. Its time to write CSS.

5. To hide “ p tag” we need give it a max-width of 0px.

p{
 background: #eee;
 padding: 0px 20px;
 max-height: 0px;
 overflow: hidden;
 transition: 300ms ease-in-out;
}

Note: Overflow: hidden is used to hide text because because of no height the text will go out. Transition is used to make a animation when we show the “ p tag” again.

6. Now that “ p tag” is hidden, We want it to show when we click on “ h1 tag ”.

7. We are going to add class “ open “ to “ p tag “, When the “ p tag “ will have class of “ open “ we will change its max-height to 400px to make it appear again.

p.open{
 max-height: 400px;
 padding: 20px;
}

8. Now since we want it to show and then hide when we click on “ h1 tag “ which have class of “accordion”. We need to use some way to add and remove class from ” h1 tag ”.

9. To add and remove class from “ h1 tag “ which have class of accordion, We are going to use jQuery.

$(function(){
    $(‘h1.accordion’).click(function(){
    $(this).next().toggleClass(‘open’);
  })
})

10. Here we are using .next() and .toggleClass methods to hide and show “ p tag ”.

So, are you wondering who this works? Let me explain.

When user clicks on “ h1 tag ” which have class of “ accordion ”. it triggers a callback function, Then we are using “ this “ keyword to refer back to “ h1 tag “ and we are saying that when a user click on “ h1 tag” which has a class of “ accordion ” then only act on this means only apply this function to only that “h1 tag” that we clicked on, So, after it selects only that “ h1 tag ” with “this” keyword. Then we are using “ .next() ” method to select next element after “ h1 tag ” which is definitely “ p tag ” . Then we apply “ .toggleClass() ” method to “ p tag ” which adds and removes “ open “ class from “ h1 tag ”.

11. Now we are adding and removing class from “ p tag ” on click. This is amazing isn’t it?

12. So, when we add class “ open “ to “ p tag ” it gives it max-width of 400px and when we remove that class from “ p tag “ it gives it max width of 0px as we defined in CSS. Which makes “ p tag ” appear and disappear.

13. Hurray… We are done with CSS3 accordion :)

“Go ahead and test your CSS3 accordion now”