CODEWITHSUNDEEP
jquery
Suresh Pattu
Suresh Pattu

Reputation: 6209

Using jQuery i want to show li five at a time when i click the show button

Using jQuery, I want to show li five at a time when I click the show button.

here is my code:

<button class="show">show</button>
<ul>
    <li id="Li0">0</li>
    <li id="Li1">1</li>
    <li id="Li2">2</li>
    <li id="Li3">3</li>
    <li id="Li4">4</li>
    <li id="Li5">5</li>
    <li id="Li6">6</li>
    <li id="Li7">7</li>
    <li id="Li8">8</li>
    <li id="Li9">9</li>
    <li id="Li10">10</li>
    <li id="Li11">11</li>
    <li id="Li12">12</li>
    <li id="Li13">13</li>
    <li id="Li14">14</li>
    <li id="Li15">15</li>
</ul>

The script is:

$(".show").click(function(){
    $("ul > li:lt(' + (index - 5) + ')+ ").addClass('active');
});

The css is:

ul li{
    display:none;
}
.active{
    display:inline;
}

Upvotes: 1

Views: 832

Answers (3)

Yorgo
Yorgo

Reputation: 2678

$(".show").click(function () {
    $("ul li").not(":visible").slice(0, 5).slideDown();
    if($("ul li").not(":visible").length == 0)
         $(this).hide();
});​

http://jsfiddle.net/9Z5Jr/4/

Upvotes: 2

user230451
user230451

Reputation: 76

with your given CSS.

Try this

$(".show").click(function() { 
  $("ul li:not(.active):lt(5)").addClass('active'); 
});

http://jsfiddle.net/ceehn/

Upvotes: 1

karim79
karim79

Reputation: 342655

$(".show").click(function () {
    $("ul li").not(".active").slice(0, 5).addClass("active");
});​

Demo.

Upvotes: 3

Related Questions