jaymc Posted December 19, 2006 Share Posted December 19, 2006 I basically want to have 4 links on my page. Each link, when clicked, will make a DIV visibleSo in essance I will have 4 hidden divs which will appear when the relivent link is clickedOk great, nice and easy!However, Onclicking a link, I want it to make all of the other 3 divs hidden..So basically, at any one time only one div will be visibleI have this script but it doesnt hide the rest when one is clicked, they just over lap. Perhaps someone could ammend this script for me, Im quite lost[code]<script type="text/javascript"><!--function resettoggle() {var e = document.getElementById('foo1');var f = document.getElementById('foo2');var g = document.getElementById('foo3');e.style.display = 'none';f.style.display = 'none';g.style.display = 'none';}function toggle_visibility(id) {var e = document.getElementById(id);var f = document.getElementById(id);var g = document.getElementById(id);if(e.style.display == 'none')e.style.display = 'block';f.style.display = 'none';g.style.display = 'none';elsee.style.display = 'none';}//--></script><body onLoad="resettoggle()"><a href="#" onclick="toggle_visibility('foo1');">Click here to toggle visibility of element #foo1</a><a href="#" onclick="toggle_visibility('foo2');">Click here to toggle visibility of element #foo2</a><a href="#" onclick="toggle_visibility('foo3');">Click here to toggle visibility of element #foo3</a><div id="foo1">This is foo1</div><div id="foo2">This is foo2</div><div id="foo3">This is foo3</div></body>[/code] Quote Link to comment https://forums.phpfreaks.com/topic/31179-toggle-divs-extra/ Share on other sites More sharing options...
fenway Posted December 19, 2006 Share Posted December 19, 2006 You don't have proper braces around your if/else... Quote Link to comment https://forums.phpfreaks.com/topic/31179-toggle-divs-extra/#findComment-144111 Share on other sites More sharing options...
jaymc Posted December 19, 2006 Author Share Posted December 19, 2006 Amended to...[code]if(e.style.display == 'none'){e.style.display = 'block';f.style.display = 'none';g.style.display = 'none';}else{e.style.display = 'none';f.style.display = 'block';g.style.display = 'block';}[/code]Stil doesnt work? Quote Link to comment https://forums.phpfreaks.com/topic/31179-toggle-divs-extra/#findComment-144144 Share on other sites More sharing options...
artacus Posted December 19, 2006 Share Posted December 19, 2006 It doesn't work because you need to e,f,g all refer to the same divfunction toggle_visibility(id) {var e = document.getElementById(id);var f = document.getElementById(id);var g = document.getElementById(id); Quote Link to comment https://forums.phpfreaks.com/topic/31179-toggle-divs-extra/#findComment-144181 Share on other sites More sharing options...
jaymc Posted December 19, 2006 Author Share Posted December 19, 2006 Can you post the amended code. I really dont know too much java, Im more PHP and SQLSorry to be a pain Quote Link to comment https://forums.phpfreaks.com/topic/31179-toggle-divs-extra/#findComment-144197 Share on other sites More sharing options...
ki Posted December 19, 2006 Share Posted December 19, 2006 [code]function ExpandCollapse(e) { var dd = document.getElementById( e ); if (dd.style.display == "") dd.style.display = "none"; else dd.style.display = "";}[/code]try that, it works great for me, I forgot where I got it tho Quote Link to comment https://forums.phpfreaks.com/topic/31179-toggle-divs-extra/#findComment-144222 Share on other sites More sharing options...
jaymc Posted December 19, 2006 Author Share Posted December 19, 2006 And what do I do with that, as I said I'm not up to scratch with the javascript..I need that working for 3 other divs.. Quote Link to comment https://forums.phpfreaks.com/topic/31179-toggle-divs-extra/#findComment-144442 Share on other sites More sharing options...
ki Posted December 23, 2006 Share Posted December 23, 2006 u just have to use a linklikeor anything like[code]<input type="button" onClick="ExpandCollapse('divid1')" value="Hide/Disable Div"><div id="divid1">Hi Div 1</div><input type="button" onClick="ExpandCollapse('divid2')" value="Hide/Disable Div"><div id="divid2">Hi Div 2</div><input type="button" onClick="ExpandCollapse('divid3')" value="Hide/Disable Div"><div id="divid3">Hi Div 3</div>[/code] Quote Link to comment https://forums.phpfreaks.com/topic/31179-toggle-divs-extra/#findComment-146896 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.