Jquery hide show list

Question

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> 

Answer 1

Untested, should work:

$('#feat li').hide().eq(0).show();

// Option 1: Simultaneous slidings:
$('#feat a').click(function() {
    $(this).parent().slideUp().next().slideDown();
});

// Option 2: Hide first, then show:
$('#feat a').click(function() {
    $(this).parent().slideUp(700, function() {
        $(this).next().slideDown();
    })
});