Custom Accordion Using jQuery

Posted By : Gaurav Arora | 29-Jun-2016

jquery

Hi, In this blog we are going to create a custom accordion using jquery. As we all know that we can easily adapt the jQuery UI’s accordion, but what about creating a custom one.

So, First of all we will start by including our Html Structure, as this structure is basic for the accordions. Here comes our Html part.

Heading 1
Heading 1 Text
Heading 2
Heading 2 Text
Heading 3
Heading 3 Text

After that we will include some css, you can make your custom styles as I am just using the some basic one’s. Here comes our css part.

 h4{cursor: pointer;
}
div{display: none;
}
.active{color: #ccc;
}

And after that last but not the least we will add some jquery which makes our accordion comes alive. Here comes our jquery code.

 $(function(){
$("h4").click(function(){
  
$(this).next().slideDown("fast");
$("div").not($(this).next()).slideUp("fast");
   
 $("h4").removeClass("active");
 $(this).addClass("active");
    
  });
});

In this way we can create a custom according with the help of jquery.

Thanks