Multi stack Multi stack - 3 months ago 6x
jQuery Question

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

I want to show the first 5

with a
Show more
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>

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


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

$(".OffersContainer > div:gt(0)").hide();
$(".OffersContainer > span").click(function(){
    $(this).text($(this).text() == "Show more" ? "Show less" : "Show more");
<script src=""></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>