Wednesday, May 14, 2014

Accordion using jQuery

<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>

1 comment: