Dysan Posted December 29, 2007 Share Posted December 29, 2007 Using JavaScript, how do I show/hide a div, upon clicking the appropriate button? <html> <head> <title></title> </head> <body> <form name="form1" method="post" action=""> <input type="submit" name="Submit" value="Show"> <input type="submit" name="Submit2" value="Hide"> </form> </body> </html> Link to comment https://forums.phpfreaks.com/topic/83536-showhide-div/ Share on other sites More sharing options...
phpQuestioner Posted December 29, 2007 Share Posted December 29, 2007 <html> <head> <title></title> </head> <body> <input type="button" name="Submit" value="Show" onclick="javascript:document.getElementById('thehidden1').style.display='block'; return true"> <input type="button" name="Submit2" value="Hide" onclick="javascript:document.getElementById('thehidden1').style.display='none'; return true"> <div id="thehidden1" style="width:300px;height:225px;border:solid 1px black;display:none"> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/83536-showhide-div/#findComment-425036 Share on other sites More sharing options...
Dysan Posted December 29, 2007 Author Share Posted December 29, 2007 can you code this using functions? Link to comment https://forums.phpfreaks.com/topic/83536-showhide-div/#findComment-425041 Share on other sites More sharing options...
phpQuestioner Posted December 29, 2007 Share Posted December 29, 2007 yes you can Link to comment https://forums.phpfreaks.com/topic/83536-showhide-div/#findComment-425046 Share on other sites More sharing options...
Dysan Posted December 29, 2007 Author Share Posted December 29, 2007 How? Can you give me an example? Link to comment https://forums.phpfreaks.com/topic/83536-showhide-div/#findComment-425371 Share on other sites More sharing options...
phpQuestioner Posted December 29, 2007 Share Posted December 29, 2007 <html> <head> <title></title> <script language="javascript"> function showIt() { document.getElementById('thehidden1').style.display='block'; } function hideIt() { document.getElementById('thehidden1').style.display='none'; } </script> </head> <body> <input type="button" name="Submit" value="Show" onclick="showIt()"> <input type="button" name="Submit2" value="Hide" onclick="hideIt()"> <div id="thehidden1" style="width:300px;height:225px;border:solid 1px black;display:none"> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/83536-showhide-div/#findComment-425496 Share on other sites More sharing options...
Mr_jmm Posted February 8, 2008 Share Posted February 8, 2008 <html> <head> <title></title> </head> <body> <input type="button" name="Submit" value="Show" onclick="javascript:document.getElementById('thehidden1').style.display='block'; return true"> <input type="button" name="Submit2" value="Hide" onclick="javascript:document.getElementById('thehidden1').style.display='none'; return true"> <div id="thehidden1" style="width:300px;height:225px;border:solid 1px black;display:none"> </div> </body> </html> I changed this code to use <a href=""> tags: <?php <a href="" onclick="javascript:document.getElementById('thehidden1').style.display='block'; return true">show</a> <a href="" onclick="javascript:document.getElementById('thehidden1').style.display='none'; return true">hide</a> <div id="thehidden1" style="width:300px;height:225px;border:solid 1px black;display:none;"> <p>CAN WE SEE THE WIBBLES?</p> </div> ?> but the division only shows for a split second. Could you please advise what I need to change to make the display:block permenant until the "hide" link is clicked? Many thanks as always, James. Link to comment https://forums.phpfreaks.com/topic/83536-showhide-div/#findComment-461616 Share on other sites More sharing options...
nogray Posted February 8, 2008 Share Posted February 8, 2008 change the "return true" to "return false" on your onclick event, otherwise the page will reload Link to comment https://forums.phpfreaks.com/topic/83536-showhide-div/#findComment-461850 Share on other sites More sharing options...
phpQuestioner Posted February 9, 2008 Share Posted February 9, 2008 If I was you; I would not use inline javascript; unless I absolutely had to. It is so much easier to change the code one function; then to change multiple onclick events. Link to comment https://forums.phpfreaks.com/topic/83536-showhide-div/#findComment-462287 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.