javascript - JS Accordion open first tab by default -
i want open first tab default on accordion. have been trying different solutions, nothing worked me.
here js , html:
$('.accordion').each(function () { var $accordian = $(this); $accordian.find('.accordion-head').on('click', function () { $(this).parent().find(".accordion-head").removeclass('open close'); $(this).removeclass('open').addclass('close'); $accordian.find('.accordion-body').slideup(); if (!$(this).next().is(':visible')) { $(this).removeclass('close').addclass('open'); $(this).next().slidedown(); } }); });
<div class="accordion"> <div class="accordion-head"> title here <div class="arrow down"></div> </div> <div class="accordion-body"> copy goes here </div> <div class="accordion-head"> title here <div class="arrow down"></div> </div> <div class="accordion-body"> copy goes here </div> <div class="accordion-head"> title here <div class="arrow down"></div> </div> <div class="accordion-body"> copy goes here </div> </div>
please help.
add following code after each
:
$('.accordion .accordion-body:first').show(); $('.accordion .accordion-head:first').addclass('open');
this find body of first tab , show it.
demo: https://jsfiddle.net/tusharj/cway1meq/1/
i've re-factored code:
$('.accordion').on('click', '.accordion-head', function () { $(this).removeclass('close').addclass('close'); $(this).next('.accordion-body').slidetoggle().siblings('.accordion-body').slideup(); }); $('.accordion .accordion-body:first').show();
much better!
Comments
Post a Comment