Darkmatter5 Posted January 27, 2009 Share Posted January 27, 2009 I have a page with 3 divs "step1, step2 and step3". Step1 has a button that says "Goto step2->", step2 has two buttons that say "<-Goto step1" and "Goto step3->" then step3 has two buttons that say "<-Goto step2" "Finish". Steps2 and 3 a initially hidden, but step1 is not. When "Goto step2->" is clicked on step1 I need to hide step1 and display step2. I think the rest speaks for itself on what I'm needing. So how can I get about displaying and hiding various divs based on what button is clicked? Thanks! Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/ Share on other sites More sharing options...
Darkmatter5 Posted January 27, 2009 Author Share Posted January 27, 2009 Here's the code I'm attempting to work with. <style type="text/css"> #step1 { position: absolute; top: 0; left: 0; width: 500px; } #step2 { position: absolute; top: 0; left: 0; display: none; width: 500px; } #step3 { position: absolute; top: 0; left: 0; display: none; width: 500px; } </style> <script type="text/JavaScript"> function togdiv(id,tog) { tog=document.getElementById(tog); cur=document.getElementById(id); tog.style.display=''; cur.style.display='none'; } </script> <div id="step1"> <input type="submit" value="Goto step 2 ->" onclick="togdiv(id_of_current_div,'step2');> </div> <div id="step2"> <input type="submit" value="<- Goto step 1" onclick="togdiv(id_of_current_div,'step1');"> <input type="submit" value="Goto step 3 ->" onclick="togdiv(id_of_current_div,'step3');> </div> <div id="step3"> <input type="submit" value="<- Goto step 2" onclick="togdiv(id_of_current_div,'step2');> <input type="submit" value="Finish"> </div> Any ideas? Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-747887 Share on other sites More sharing options...
bobleny Posted January 28, 2009 Share Posted January 28, 2009 Well, I don't understand exactly why you want to do that, but this is how I would do it: <html> <head> <script type="text/JavaScript"> <!-- function Hide(field) { if((field == "1") || (field.id == "1")) { document.getElementById("step1").style.display = "block"; document.getElementById("step2").style.display = "none"; document.getElementById("step3").style.display = "none"; } if(field.id == "2") { document.getElementById("step1").style.display = "none"; document.getElementById("step2").style.display = "block"; document.getElementById("step3").style.display = "none"; } if(field.id == "3") { document.getElementById("step1").style.display = "none"; document.getElementById("step2").style.display = "none"; document.getElementById("step3").style.display = "block"; } if(field.id == "4") { document.getElementById("step1").style.display = "none"; document.getElementById("step2").style.display = "none"; document.getElementById("step3").style.display = "none"; } } //--> </script> <title>A Title!</title> </head> <body onload="Hide(1)"> <div id="step1"> <input type="button" id="2" value="Goto step 2 ->" onclick="Hide(this)" /> </div> <div id="step2"> <input type="button" id="1" value="<- Goto step 1" onclick="Hide(this)" /> <input type="button" id="3" value="Goto step 3 ->" onclick="Hide(this)" /> </div> <div id="step3"> <input type="button" id="2" value="<- Goto step 2" onclick="Hide(this)" /> <input type="button" id="4" value="Finish" onclick="Hide(this)" /> </div> </body> </html> Please take better care of your scripting, because there where a lot of errors in the script you posted.... Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-748160 Share on other sites More sharing options...
Psycho Posted January 28, 2009 Share Posted January 28, 2009 The first test in that function has an error (it is checking the field object instead of the ID). But there is a simpler way to do all of that with much less code. Tis will alllow you to add or remove div sections withouth having to change the function <html> <head> <title>A Title!</title> <script type="text/JavaScript"> <!-- function Hide(fieldID) { var i = 1; while(document.getElementById('step'+i)) { document.getElementById('step'+i).style.display = (fieldID==i++) ? 'block' : 'none'; } return; } //--> </script> </head> <body onload="Hide(1)"> <div id="step1"> Div 1 Content<br> <input type="button" id="2" value="Goto step 2 ->" onclick="Hide(this.id)" /> </div> <div id="step2"> Div 2 Content<br> <input type="button" id="1" value="<- Goto step 1" onclick="Hide(this.id)" /> <input type="button" id="3" value="Goto step 3 ->" onclick="Hide(this.id)" /> </div> <div id="step3"> Div 3 Content<br> <input type="button" id="2" value="<- Goto step 2" onclick="Hide(this.id)" /> <input type="button" id="4" value="Finish" onclick="Hide(this.id)" /> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-748463 Share on other sites More sharing options...
Darkmatter5 Posted January 28, 2009 Author Share Posted January 28, 2009 Here's the code I came up with LATE last night. This works more or less, but my radio buttons stay checked after they've been clicked. So if you click on step 1 then step 2, step 1 stays clicked, but the toggle function works fine. Attached is a screenshot of the effect. <style type="text/css"> #step1 { position: absolute; top: 200px; left: 0; width: 500px; padding: 5px; } #step2 { position: absolute; top: 200px; left: 0; display: none; width: 500px; padding: 5px; } #step3 { position: absolute; top: 200px; left: 0; display: none; width: 500px; padding: 5px; } #steps { position: absolute; top: 0; left: 0; width: 500px; height: 200px; border-bottom: 1px dashed; } </style> <script type="text/JavaScript"> function togdiv(thediv) { document.getElementById("step1").style.display="none"; document.getElementById("step2").style.display="none"; document.getElementById("step3").style.display="none"; document.getElementById(thediv).style.display="block"; } </script> <div id="steps"> <input type="radio" name="toggledivs1" onclick="togdiv('step1');">STEP 1: (required data & description)<br> <input type="radio" name="toggledivs2" onclick="togdiv('step2');">STEP 2: (systems, publishers & developers)<br> <input type="radio" name="toggledivs3" onclick="togdiv('step3');">STEP 3 </div> <div id="step1"><span class="large_text"><b>STEP 1: (required data & description)</b></span><p></div> <div id="step2"><span class="large_text"><b>STEP 2: (systems, publishers & developers)</b></span><p></div> <div id="step3"><span class="large_text"><b>STEP 3:</b></span><p></div> Why are the radio buttons staying on?? [attachment deleted by admin] Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-748488 Share on other sites More sharing options...
Psycho Posted January 28, 2009 Share Posted January 28, 2009 A radio group must all have the same name. You should also check the first option by default if section 1 will be displayed by default. <input type="radio" name="toggledivs" onclick="togdiv('step1');" checked="checked">STEP 1: (required data & description)<br> <input type="radio" name="toggledivs" onclick="togdiv('step2');">STEP 2: (systems, publishers & developers)<br> <input type="radio" name="toggledivs" onclick="togdiv('step3');">STEP 3 Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-748506 Share on other sites More sharing options...
Darkmatter5 Posted January 28, 2009 Author Share Posted January 28, 2009 Perfect thanks! Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-748519 Share on other sites More sharing options...
bobleny Posted January 28, 2009 Share Posted January 28, 2009 The first test in that function has an error (it is checking the field object instead of the ID). My script doesn't have an error in it! That was done on purpose to make the script work onload. Could you explain your script, mjdamato? I don't understand how your while loop breaks, because the condition never changes... ------ Glade to here you got your script to work! Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-748555 Share on other sites More sharing options...
Psycho Posted January 28, 2009 Share Posted January 28, 2009 The first test in that function has an error (it is checking the field object instead of the ID). My script doesn't have an error in it! That was done on purpose to make the script work onload. Could you explain your script, mjdamato? I don't understand how your while loop breaks, because the condition never changes... My appologies, I recognized the reason for the first test before completing my response, but I forgot to remove that statement. As for the conditin never changing . . . it does: document.getElementById('step'+i).style.display = (fieldID==i++) ? 'block' : 'none'; When you use var++, the variable is first returned and then incremented by one. So, on the first pass it checks if 'fieldID' is equal to the current value of 'i' and then increments 'i' by one. FYI: ++var is slightly different in that it increments the value and then returns it Examples var foo = 1; alert(foo); // alerts 1 //foo++, return current value then increment it alert(foo++); // alerts 1 (foo now equals 2) alert(foo); // alerts 2 //foo++, increment current value then return it alert(++foo) // alerts 3 (foo equals 3) alert(foo); // alerts 3 Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-748651 Share on other sites More sharing options...
bobleny Posted January 28, 2009 Share Posted January 28, 2009 Right, I know that.... However, I think I figured it out. Though your while loop never goes false, it should eventually go null, which would terminate the loop... On the other hand, the following script works just the same!? function Hide(fieldID) { var i = 1; while("joe") { document.getElementById('step'+i).style.display = (fieldID==i++) ? 'block' : 'none'; } return; } Since joe is always joe, the loop should never end and IE should crash. (Firefox to the rescue!) If you run the modified script, it works fine.... Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-748696 Share on other sites More sharing options...
Psycho Posted January 28, 2009 Share Posted January 28, 2009 Though your while loop never goes false, it should eventually go null, which would terminate the loop... Basically yes. But, checking to see if an object exists is good practice anyway. Especially when you get into functions/properties that are different from browser to browser. Quote Link to comment https://forums.phpfreaks.com/topic/142683-solved-div-showhide-with-buttons/#findComment-748745 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.