Advanced Search

jQuery accordian without jQuery accordian

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $("fieldset").each(function (){
  2.                 if($(this).attr('class')!='active'){
  3.                     $("div.expandContent", this).hide();
  4.                 }
  5.             });
  6.             $(".expandChild").click(function (e){
  7.                 e.preventDefault();
  8.                 if(!$(this).hasClass('expandChildActive')){
  9.                     $("div.expandContent").slideUp();
  10.                     $(this).next().next().height($(this).next().next().height()); //Fix for slide jumping position
  11.                     $(this).next().next().slideToggle();
  12.                     $('button.expandChild').removeClass('expandChildActive');
  13.                     $(this).addClass('expandChildActive');
  14.                 } else {
  15.                     $(this).next().next().slideToggle();
  16.                     $(this).removeClass('expandChildActive');
  17.                 }
  18.             });
  19.  
  20.                 <fieldset class="active">
  21.                     <h1>Title</h1>
  22.                     <button class="suspendacc"></button>
  23.                     <button class="expandChild expandChildActive"></button>
  24.                     <div class="clear"></div>
  25.                     <div class="expandContent">
  26.  
  27.                     </div>
  28.                 </fieldset>
  29.                 <fieldset class="active">
  30.                     <h1>Title 2</h1>
  31.                     <button class="suspendacc"></button>
  32.                     <button class="expandChild"></button>
  33.                     <div class="clear"></div>
  34.                     <div class="expandContent">
  35.  
  36.                     </div>
  37.                 </fieldset>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.