<div id="accordion">
<h3 class="title">First header</h3>
<div class="content">First content panel</div>
<h3 class="title">Second header</h3>
<div class="content">Second content panel</div>
</div>
<style>
.content{display:none;}
</style>
//Type One
<script>
jQuery('#accordion .title').each(function(){
jQuery(this).addClass('active');
jQuery(this).toggle(function(){
jQuery(this).addClass('active').next().slideDown(200);
},function(){
jQuery(this).removeClass('active').next().slideUp(200);
})
});
</script>
//Type Two
<script>
a = jQuery('.footer-menu').find('#accordion .title');
console.log(a.hasClass('active'));
jQuery('#accordion .title').click(function(e){
e.preventDefault();
speed = 300;
if(jQuery(this).hasClass('active') === true) {
} else if(a.hasClass('active') === false) {
jQuery(this).addClass('active').next('.content').slideDown(speed);
} else {
a.removeClass('active').next('.content').slideUp(speed);
jQuery(this).addClass('active').next('.content').delay(speed).slideDown(speed);
}
});
</script>