JavaScript with next and previous for divs one at a time

[nanis]

I am new to W3Schools Forum and JavaScript. I have used a function toggleDiv(divId) for the next and previous buttons that show a table in 5 different divs on a PHP page. The buttons work. The problem is that at first all the div's show up on the page then switch to one at a time once the next button is pressed. How do I just call the first div id with a next button to the rest? Do I set up each div as a variable to be called from an array? I saw something about style="visibility: visible" or "hidden", but I don't know to make that work either. Here is some of what I have: <script type="text/javascript"> function toggleDiv(divId){ for(var i = 1; i < 6; i++) { var tempDivId = "graffiti" + i; document.getElementById(tempDivId).style.display='none'; } document.getElementById(divId).style.display='block'; return false; }</script> <div id="graffiti1"> <table id="tbl"> <tr> <td><img alt="..." src=".._Web.jpg" /><br >...</td> <td><img alt="..." s rc="A.._Web.jpg"><br >...</td> </tr> <tr> <td colspan="2"> <input type="button" id="btnnext1" value="Next" onclick="toggleDiv('graffiti2');" /> </td> </tr> </table> </div><div id="graffiti2"> <table id="tbl"> <tr> <td><img alt="..." src=".._Web.jpg"><br >...</td> <td><img alt="..." src=".._Web.jpg"><br >...</td> </tr> <tr> <td colspan="2"> <input type="button" id="btnnext2" value="Next" onclick="toggleDiv('graffiti3');" /></td> <td colspan="2"> <input type="button" id="btnprev1" value="Previous" onclick="toggleDiv('graffiti1');" /> </td> </tr> </table> </div> <div id="graffiti3"> <table id="tbl"> <tr> <td><img alt="..." src=".._Web.jpg"><br >...</td> <td><img alt="..." src=".._Web.jpg"><br >...</td> </tr> <tr> <td colspan="2"> <input type="button" id="btnnext3" value="Next" onclick="toggleDiv('graffiti4');" /></td> <td colspan="2"> <input type="button" id="btnprev2" value="Previous" onclick="toggleDiv('graffiti2');" /> </td> </tr> </table> </div>Thanks for any help.

Edited August 29, 2013 by nanis

[davej]

The first function of your code toggleDiv() hides all the blocks and then unhides the selected block. All you need to do is call toggleDiv(1) when your page loads. If you put your code in the head you can do this with the window.onload event. If you put your code at the bottom of the body you can just add the call.

 

http://www.w3schools.com/jsref/prop_style_display.asp

Edited August 28, 2013 by davej

[nanis]

davej,I tried the onload event, but still didn't get anywhere. However, the site you posted www.w3school..yle_display.asp helped me to come up with the answer. So simple. I added style="display:none" to the divs and it works.Thanks

[davej]

You could also add the following to the top of the file...

 

#graffiti2,#graffiti3,#graffiti4,#graffiti5{

display: none;

}

 

...but it seemed easier to add toggleDiv(1) to the bottom of your page.

Edited August 29, 2013 by davej

[dsonesuk]

Add a outer parent container around graffiti#n divs example

<div id="graffiti_wrap"> <div id="graffiti1">...</div> <div id="graffiti2">...</div> <div id="graffiti3">...</div></div>

then use

#graffiti_wrap div ~ div {display:none;}

all sibling divs after the first will have display: none; applied