neilfurry Posted November 15, 2010 Share Posted November 15, 2010 Im having this problem and dont know how to figure out, first i have five links on my page, then each link is assigned a hidden div, then when i click on the first link the div designated to that link will show, now, the problem is when i clicked the other links the previous div still show, now, please anyone help me.. i want to make it so that when i clicked on different link, only the designated div will show and it ill close the previously opened div.. kindly help please.. Thanks Quote Link to comment Share on other sites More sharing options...
ManiacDan Posted November 15, 2010 Share Posted November 15, 2010 You have a javascript function that shows these divs, right? Have that function hide EVERY DIV, then SHOW the one you want. Every click, all the divs will be hidden, then the proper one will be shown. -Dan Quote Link to comment Share on other sites More sharing options...
Psycho Posted November 15, 2010 Share Posted November 15, 2010 Here is an example: <html> <head> <script type="text/javascript"> function showDiv(selectedDivNo) { var divNo = 1; while(document.getElementById('div_'+selectedDivNo)) { document.getElementById('div_'+divNo).style.display = (divNo==selectedDivNo) ? 'inline' : 'none'; divNo++ } return false; } </script> </head> <body> <a href="#" onclick="return showDiv(1);">Show div 1</a> <a href="#" onclick="return showDiv(2);">Show div 2</a> <a href="#" onclick="return showDiv(3);">Show div 3</a> <a href="#" onclick="return showDiv(4);">Show div 4</a> <a href="#" onclick="return showDiv(5);">Show div 5</a> <br /> <div id="div_1" style="display:none;">Div 1</div> <div id="div_2" style="display:none;">Div 2</div> <div id="div_3" style="display:none;">Div 3</div> <div id="div_4" style="display:none;">Div 4</div> <div id="div_5" style="display:none;">Div 5</div> </body> </html> Quote Link to comment Share on other sites More sharing options...
neilfurry Posted November 15, 2010 Author Share Posted November 15, 2010 It works fine, but one more thing, when i click again any of the link it should hide that div.. for example i clicked on "Show div 1" then it will show Div 1, then when i clicked it again it will hide Div 1 Quote Link to comment Share on other sites More sharing options...
seanlim Posted November 17, 2010 Share Posted November 17, 2010 function showDiv(selectedDivNo) { var divNo = 1; while(document.getElementById('div_'+divNo)) { document.getElementById('div_'+divNo).style.display = (divNo==selectedDivNo && document.getElementById('div_'+divNo).style.display=="none") ? 'inline' : 'none'; divNo++ } return false; } 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.