Question

I need to hide all list elements, but only show one at a certain time depending on the direction or button pressed by the nav bar.

I’ve tried this:

$('ul li').hide().first().show();

which shows me the first element in the list.

But now I need to take control of the list with navigation which I don’t know how to do.

Basically, I need a menu that has more or less this layout:

< - prev           LINK1            next - >

So basically, id have a unordered list, so the html would be like this

<ul>
    <li>LINK1</li>
    <li>LINK2</li>
    <li>LINK3</li>
</ul>

So, I need to only display one at a time, and once the next or previous buttons are pressed it would “loop through” the list if it’s at the end or start.

Answer 1

Maybe these code can help you
http://jsfiddle.net/sechou/UmRph/7/

$("li").hide();   // hide every element first
$("li:first").show(); // only display the first one
var idx = 0;
$("nextbtn").click(function(){
     if(idx == $("li").size() -1)
          idx =0;
     else
          idx++;

     $("li").hide();
     $("li:eq("+ idx + ")").show();
});
$("prevbtn").click(function(){
     if(idx == 0)
          idx = $("li").size() -1;
     else
          idx--;

     $("li").hide();
     $("li:eq("+ idx + ")").show();
});