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

Question

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 1

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>