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
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