Create an Accordion with HTML, CSS and jQuery

Demo Download

Today i will share how to create an accordion with HTML, CSS and jQuery, accordion is very common now a days, and it is very useful, you have seen it various time at FAQs section where list of questions appearing, by clicking on link its details are being displayed below the question.

You might like this Create a Popup Modal using jQuery.

Steps to Create an Accordion with HTML, CSS and jQuery

To create an accordion with HTML, CSS and jQuery, we need to follow the below steps.

  1. Write an HTML Markup
  2. Write CSS
  3. Write jQuery

1. Write an HTML Markup

First of all, we need to create an index.html file and paste the following HTML markup in its body section.

HTML Explained

First we have created main div named accordion. All accordion sections will be inside this main div.

After that we created a section for accordion which contain the title of accordion and content of accordion.

So if you want to create multiple accordion, simply create multiple section div in main accordion div.

2. Write CSS

Second step is to write a CSS for accordion, paste the following CSS in style sheet.

Although the CSS are self explanatory, i have also commented in CSS for your ease.

But i will explain that first i defined the style for accordion div, then accordion section title and in the last for its content. You can also see that there are + and – signs for opened and closed accordion. For that purpose i have defined CSS for + sign in  .section-title:after and for – sign in .section-title.active:after

3. Write jQuery

Don’t forget to add the jQuery Library before the below jQuery script, jQuery library file is also available in the download of this tutorial.

jQuery Explained

We created a function  close_section() to remove .active class from section title and remove .open class from section content.

Whenever user clicked on any section title, function  close_section() will be triggered and if user clicked on new section title then we will also add .active class and  .open class to section title and section content respectively.

Conclusion

Creating an accordion with HTML, CSS and jQuery is very easy, you can add multiple section in your accordion, all you need to do is change href="#accordion-1"  value of section title and div id="accordion-1"  value, both value (section content div and section title) should be same.

Demo Download

If you found this tutorial helpful, share it with your friends and developers group.

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

 

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.

Leave a Reply

Your email address will not be published. Required fields are marked *