jquery - Slide Up on click -
i have several divs
on page. on page load want first
div visible 'show more' link. upon clicking 'show more', want load first three
divs , on clicking second time want show all
divs.
so far working fine. after show all
, when span tag clicked, should slide , hide except first div i.e should reset divs on page load gives show more/show less
effect.
here fiddle
try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script> <div class="offerscontainer"> <div class='pan-box'>a</div> <div class='pan-box'>b</div> <div class='pan-box'>c</div> <div class='pan-box'>d</div> <div class='pan-box'>e</div> <span>show more</span> </div> <script> $(".offerscontainer > div:gt(0)").hide(); var click = false; var = 1; $(".offerscontainer > span").click(function() { if (i <= 2) { $(this).siblings(click ? "div:gt(0)" : "div:lt(3)").slidedown(); click = true; } else { $(this).siblings("div:gt(0)").slideup(); click = false; = 0; } i++; }); </script>
Comments
Post a Comment