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> Quote Link to comment 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> Quote Link to comment Share on other sites More sharing options...
Dysan Posted December 29, 2007 Author Share Posted December 29, 2007 can you code this using functions? Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 29, 2007 Share Posted December 29, 2007 yes you can Quote Link to comment 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? Quote Link to comment 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> Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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.