jquery - How to collapse accordion tabs? -
at moment have set accordion page when click on each accordion tab collapses 1 above or below.
what achieve can click accordion tab opens , can close down.
my html follow:
<dl class="accordion"> <dt class="title"> <p>accordion 1</p> </dt> <dd> <p>some text accordion here...</p> </dd> <dt class="title"> <p>accordion 2</p> </dt> <dd> <p>some text accordion here...</p> </dd> <dt class="title"> <p>accordion 3</p> </dt> <dd> <p>some text accordion here...</p> </dd> <dt class="title"> <p>accordion 4</p> </dt> <dd> <p>some text accordion here...</p> </dd> </dl>
my jquery is:
(function($) { var allpanels = $('.accordion > dd').hide(); $('.accordion > dd:first-of-type').show(); $('.accordion > dt:first-of-type').addclass('accordion-active'); jquery('.accordion > dt').on('click', function() { $this = $(this); $target = $this.next(); if(!$this.hasclass('accordion-active')){ $this.parent().children('dd').slideup(); jquery('.accordion > dt').removeclass('accordion-active'); $this.addclass('accordion-active'); $target.addclass('active').slidedown(); } return false; }); })(jquery);
you check if element has class accordition-active
, add else
part.
if(!$this.hasclass('accordion-active')){ $this.parent().children('dd').slideup(); jquery('.accordion > dt').removeclass('accordion-active'); $this.addclass('accordion-active'); $target.addclass('active').slidedown(); } else { $this.removeclass('accordition-active'); $this.parent().children('dd').slideup(); }
Comments
Post a Comment