Multi stack Multi stack - 4 months ago 8
jQuery Question

Show first item and show/hide anothers when click using jquery

I want to show the first 5

divs
with a
Show more
and
Show less
link enabling users to expand them. When Page loads I want only one div visible and rest hidden. On clicking
Show more
I want to show first five.

My divs are arranged like this:

<div class = "OffersContainer">
<div class='pan-box'></div>
<div class='pan-box'></div>
<div class='pan-box'></div>
</div>


I want the effect on my divs inside the
OffersContainer
. How can I do this with jquery?

Answer

You can use :gt() selector to finding element that has index great than number.

$(".OffersContainer > div:gt(0)").hide();
$(".OffersContainer > span").click(function(){
    $(this).siblings("div:gt(0)").slideToggle(); 
    $(this).text($(this).text() == "Show more" ? "Show less" : "Show more");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

Comments