arbitter Posted November 10, 2010 Share Posted November 10, 2010 Hi there, My javascript knowledge is very tiny. I can show a div using the onClick; example: <a href='#' onClick=\"document.getElementById('theDiv').style.display='block';\">Show div.</a> <div id='theDiv' style='display:none;'>I'll be shown if you click it </div> Now what I want to do is be able to click the same link again, and hide the div again. So actually a toggle between shown and un-shown. Any help will be highly appreciated! Quote Link to comment Share on other sites More sharing options...
micah1701 Posted November 10, 2010 Share Posted November 10, 2010 there are toggle functions built into framework languages like jquery that might, but what I would do in your situation is set a js variable that tells you the current state of the div. then when the link is clicked, do the opposite and update the state. var display_div = false; function display_or_hide(){ if(!display_div){ document.getElementById('theDiv').style.display='none'; display_div = true; }else{ document.getElementById('theDiv').style.display='block'; display_div = false; } } then set your html like: onClick="display_or_hide()">Show div.</a> Quote Link to comment Share on other sites More sharing options...
Psycho Posted November 10, 2010 Share Posted November 10, 2010 <html> <head> <script type="text/javascript"> function showHideDiv(linkObj, divID) { var showDiv = (linkObj.innerHTML!='Hide div.'); document.getElementById(divID).style.display = (showDiv) ? 'block' : 'none'; linkObj.innerHTML = (showDiv) ? 'Hide div.' : 'Show div.'; return; } </script> </head> <body> <a href="#" onClick="showHideDiv(this, 'theDiv');">Show div.</a> <div id='theDiv' style='display:none;'>I'll be shown if you click it </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
micah1701 Posted November 11, 2010 Share Posted November 11, 2010 show off Quote Link to comment Share on other sites More sharing options...
arbitter Posted November 11, 2010 Author Share Posted November 11, 2010 That code seems to work nicely, thanks a lot! But what if I do not want to change what the link says? edit: with your code, micah1701, I can hide and unhide without the link value to change. Problem is though, that when it' clicked for the first time, you have to click twice. Then the div gets shown. And from then on, you only have to click once to hide or show it... edit2: changed the block and the none from place in the javascript, works nicely now! <script type='text/javascript'> var display_div = false; function display_or_hide(){ if(!display_div){ document.getElementById('loginForm').style.display='block'; display_div = true; }else{ document.getElementById('loginForm').style.display='none'; display_div = false; } } </script> <?php echo "<div onClick=\"display_or_hide()\">Click on me!</div>"; echo "<div id='loginForm' style='display:none;'>I play hide 'n' seek!</div>"; ?> 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.