Hi, there, a very simple problem here, I need to show one div at the time, the divs are all numbered and all hidden to begin with.

I need the "Next Feature Event" link to hide the previous div and display the next... Missing something here.... I need to take the number out of the string somehow. Help!

//display the first div document.getElementById('eventlisting_0').style.display='block';

Next feature event

oh, btw, the number of the divs is not known, they are all created dynamically by PHP and all hidden by PHP also.

Quick & untested:

    function showNext(i) {
        var elToHide = document.getElementById('eventlisting_' + i);
        var elToShow = document.getElementById('eventlisting_' + (i + 1));

         // hide current
        elToHide.style.display = 'none';

        // show next
        if (elToShow != null) {
            elToShow.style.display = 'block';
        }
    }

</script>

<a href="#" id="eventlisting_1" onclick="showNext(1)" style="display:block" >1</a><br />
<a href="#" id="eventlisting_2" onclick="showNext(2)" style="display:none" >2</a><br />
<a href="#" id="eventlisting_3" onclick="showNext(3)" style="display:none" >3</a><br />
<a href="#" id="eventlisting_4" onclick="showNext(4)" style="display:none" >4</a><br />
<a href="#" id="eventlisting_5" onclick="showNext(5)" style="display:none" >5</a><br />

Edit -- and obviously I didn't read the question correctly! wowbagger's solution will do what you want.

Should you not be able to edit the php output :

function nextF(){ var aF = new Array; var current = ''; var i=1;

while(document.getElementById('eventlisting_'+i)){
    aF.push(document.getElementById('eventlisting_'+i));
    i++;
}
for(var j=0;j<aF.length; j++){
    if(aF[j].style.display == 'block'){ current = j; }
}
aF[current].style.display = 'none';
if(aF[current+1]){aF[current+1].style.display = 'block';}
else{aF[0].style.display = 'block';}

}

next feature

feature 1 feature 2 ..

cool, I was thinking of how to pass the number of divs from PHP to Javascript, but I am seeing that you don't need to, just count the number of divs existing on the page. Thanks!

Natalia.

hmm, having a bit of trouble with either one...

Bottom solution

Top solution

Scudsucker's script works, just have to figure out how to make the same link cycle through divs.

try setting var i = 0 in the function, since your id's are 0 based.

Ideally you would create the array of objects with document.getElementsByName() or document.getelementsByClassName() ( available in most javascript libraries ). The method I used is not very clean

yay, magic. Thanks!