Jquery hide show list

Posted by faxtion on Stack Overflow See other posts from Stack Overflow or by faxtion
Published on 2010-03-25T22:01:23Z Indexed on 2010/03/25 22:03 UTC
Read the original article Hit count: 522

Filed under:
|

Having few issues with a jquery hide show item.

Got a list of images, want to show the first one but hide the rest and when the user clicks next the current one is hidden and then the next list item is shown.

Been banging head against wall for a while, and there is probably a very easy solution but for some reason I am unable to see it. Would be grateful of any advice.

    $(function() {
    $('#feat>li:gt(0)').hide();
    var $links = $('#feat>li');
    var $item  = $('#feat>li');

    $links.click(function() {
        var $par = $(this);
        $par.slideUp(700, function() {
            var index = $links.index( $par.get(0) )
            $item.eq( index ).slideDown(700);
        }); 
    });
});

    <div id="feature">
    <ul id="feat">
        <li><img src="images/sample.png" /><a href="#">Next</a></li>
        <li><img src="images/sample2.jpg" /><a href="#">Next</a></li>
        <li><img src="images/sample.png" /><a href="#">Next</a></li>
    </ul>
</div> 

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about help