jQuery accordian without jQuery accordian


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



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.