Best Accordion menu using css and jquery

Now a days lot of websites contains the accordion menu to save the spaces or to display their content in different manner. Specifically The Faq contents and Events content and etc...

Accordion is one of the best idea to display the specific contents in webpages in different manner using css and jquery.

Accordions are useful when you want to toggle between hiding and showing large amount of content in your webpage. so you can save the space in your webpage. Now a days most of them used this accordion for several purpose for example faq pages and events page and etc.

Css Code

.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
background:#f7f7f7;
}

.accordion-section-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#333;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
}

.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
/* Type */
text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}

.accordion-section-content {
padding:15px;
display:none;
}


a.accordion-section-title:after {
    content: '+';
    color: #fff;
    float: right;
    font-weight: bold;

}

a.accordion-section-title.active:after {
    content: '-';
}

.accordion-section a{
text-decoration:none;
}

Javascript Code

jQuery(document).ready(function() {

function close_accordion_section() {

jQuery('.accordion .accordion-section-title').removeClass('active');

jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');

}

jQuery('.accordion-section-title').click(function(e) {

// Grab current anchor value

var currentAttrValue = jQuery(this).attr('href');

if(jQuery(e.target).is('.active')) {

close_accordion_section();

}else {

close_accordion_section();

// Add active class to section title

jQuery(this).addClass('active');

// Open up the hidden content panel

jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 

}

e.preventDefault();

});

});

Html Code

<div class="main">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion Section 1</a>
<div id="accordion-1" class="accordion-section-content">
<p>Nam aliquet quis orci ac blandit. Fusce risus ligula, volutpat sit amet tortor interdum, ullamcorper fringilla dolor. Nam sit amet risus arcu. Etiam tristique nisi ac nunc venenatis, quis ultricies ex eleifend. Suspendisse id aliquet enim. Praesent ultricies dapibus metus. Curabitur sed iaculis purus. Proin varius commodo nisl, fringilla interdum dolor imperdiet in. Curabitur et purus tincidunt, volutpat enim nec, tincidunt metus..</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->

<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">Accordion Section 2</a>
<div id="accordion-2" class="accordion-section-content">
<p>Nam aliquet quis orci ac blandit. Fusce risus ligula, volutpat sit amet tortor interdum, ullamcorper fringilla dolor. Nam sit amet risus arcu. Etiam tristique nisi ac nunc venenatis, quis ultricies ex eleifend. Suspendisse id aliquet enim. Praesent ultricies dapibus metus. Curabitur sed iaculis purus. Proin varius commodo nisl, fringilla interdum dolor imperdiet in. Curabitur et purus tincidunt, volutpat enim nec, tincidunt metus.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">Accordion Section 3</a>
<div id="accordion-3" class="accordion-section-content">
<p>Nam aliquet quis orci ac blandit. Fusce risus ligula, volutpat sit amet tortor interdum, ullamcorper fringilla dolor. Nam sit amet risus arcu. Etiam tristique nisi ac nunc venenatis, quis ultricies ex eleifend. Suspendisse id aliquet enim. Praesent ultricies dapibus metus. Curabitur sed iaculis purus. Proin varius commodo nisl, fringilla interdum dolor imperdiet in. Curabitur et purus tincidunt, volutpat enim nec, tincidunt metus.</p>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->
</div>