nanis Posted August 28, 2013 Share Posted August 28, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted August 28, 2013 Share Posted August 28, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
nanis Posted August 29, 2013 Author Share Posted August 29, 2013 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 Link to comment Share on other sites More sharing options...
davej Posted August 29, 2013 Share Posted August 29, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 29, 2013 Share Posted August 29, 2013 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now