CODEWITHSUNDEEP
javascriptjquery
Dirty Bird Design
Dirty Bird Design

Reputation: 5553

jQuery animate through unordered list

I have an unordered list, the ul itself has no set height, and the li's have no set height. I'm trying to only show 5 li's and cycle through them with up/down arrows. The issue I'm having is with the 'up' button. For this example, I have 6 items, and on the sixth click of 'up' it no longer hides the items but simply adds to them, defeating the purpose of the slider.

HTML

<div id="container">
            <a href="#" id="up">Up</a>
            <a href="#" id="down">Down</a>
          <ul>
            <li><span>Gun 1</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 2</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 3</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 4</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 5</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 6</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
          </ul>
        </div>

JS

$('#container > ul > li:gt(4)').hide();
$('#up').click(function(e){
    var first = $('#container ul li:first');
    first.hide('fast',function(){
    $('#container ul').append(first.show(500));
    $('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});
$('#down').click(function(e){
    var last = $('#container ul li:last');
    last.hide('fast',function(){
    $('#container ul').prepend(last.show(500));
    $('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});

Upvotes: 1

Views: 377

Answers (1)

Uttara
Uttara

Reputation: 2532

try out this.. actually onclick of up you were trying to show the first li, instead of that u need to show the sixth one, so have added a line to show only those li's whose index is < 5

$('#container > ul > li:gt(4)').hide();
$('#up').click(function(e){
    var first = $('#container ul li:first');
    first.hide('fast',function(){
       $('#container ul').append(first);  //don't show the first one, just append it
       $('#container ul li:lt(5)').show(500); // add this line
       $('#container > ul > li:gt(4)').hide();
    });
    e.preventDefault();
});
$('#down').click(function(e){
    var last = $('#container ul li:last');
    last.hide('fast',function(){
       $('#container ul').prepend(last.show(500));
       $('#container > ul > li:gt(4)').hide();
    });
   e.preventDefault();
});

Upvotes: 1

Related Questions