Question

I have the following HTML – http://jsfiddle.net/X763j/

What I am trying to do is loop through them showing one at a time in a kinda infinite slider way.

JavaScript is not my strong point, but from my understanding you can use the jQuery .toggle function.

How would I do it so that it only showed the next one.

If someone could point me in the right direction I would appreciate it.

Answer 1

You can do it with jQUery. Hide the :visible one and show the .next() one. Once you get to the end, the next one is the :first one.

function next() {
    var current = $("#slider .slide:visible");
    current.hide();
    var next = current.next(".slide");
    if(next.length == 0)
        next = current.siblings().filter(":first")
    console.log(next);
    next.show();
}

setInterval(next, 1000);​

Demo

You can check the jQuery Documentation to get more information on all of the functions and selectors I used.

You should take a look at one of the many jQuery Carousel plugins too.