Jump to content
nanis

JavaScript with next and previous for divs one at a time

Recommended Posts

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 by nanis

Share this post


Link to post
Share on other sites

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 by davej

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by davej

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...