How to create a flat design accordion menu using Jquery

Flat design is also known as modern UI as its elements are sleek and fascinating.As I also love flat design,that is the reason I've created a accordion menu under flat design using Jquery.I've shared a tutorial of nested accordion menu but,this one is a bit different.So lets have a look on the pen below.

Now in this accordion menu there is a feature that if a heading is clicked then all other container get close and only the clicked container get open.While other features like flat design make it a complete tool.So lets see how does it becomes possible.

HTML

If you can see the HTML part in the pen above,its very simple with an outer container with a class='accordion' and inside that there is a description list (dl) tag under which dt represents the heading while dd represents its content.No need of adding any classes in any of the tags.

Jquery

Jquery is written very simple and minimized to work perfectly.

First all the container (dd) get slides up as follows.

$('.accordion').find('dd').slideUp();

Then on click of a heading (dt) there is a function get trigger and a condition is applied i.e if the click heading is having class active then remove its class and slide up the container (dd) just after it.This is the reason that if you will click on the opened container the heading get back in normal position and container get closed.As it follows below,

$('.accordion').find('dt').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).next('dd').slideUp();
}

With the above condition there is one more part if the clicked heading (dt) is not having class active then remove the class active from all the headings and slide up all the container and add a class active into clicked heading and slide up the container next to it.It is as follows,

else{
$('.accordion').find('dt').removeClass('active');
$('.accordion').find('dd').slideUp();
$(this).addClass('active');
$(this).next('dd').slideDown();
}

To make it pretty I've added a bit CSS3 transitions and to give it a flat design look,I've added simple brown shaded colours with Open sans.Plus (+) and Minus (-) sign are added using pseudo element that is :after.

If you didn't get anything,our comments are open.