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();   } 

http://jsfiddle.net/h28n5aw5/