Hi, I have a requirement in my webpage to do this. I have two links and two divs. when user clicks one link, it should show the related div and hide the other. When 2nd link is clicked, 1st div should hide and second div should show up. I used javascript to do this. but nothing is happening. Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Investments FundPage</title> <script type="text/javascript" language="JavaScript"><!-- function showHideItems(myItem){ var myItem = document.getElementById(myItem); switch (myItem){ case "ta_sidebar": myItem.style.display = "block"; document.getElementById("ef_sidebar").style.display = "none"; break; case "ef_sidebar": myItem.style.display = "block"; document.getElementById("ta_sidebar").style.display = "none"; break; } //this code works if I click ones to //show the div and again click on same link to hide and later go to 2nd //link if you want to show the 2nd div /* var myItem = document.getElementById(myItem); if (myItem.style.display != "none") { //items are currently displayed, so hide them myItem.style.display = "none"; } else { //items are currently hidden, so display them myItem.style.display = "block"; } */ } //--></script> </head> <body> <a href="#" onclick="showHideItems('ta_sidebar');" style="width:100px; border:solid thin blue; text-decoration:none; padding:0em 2em; margin-left: 10px; margin-top:27px; float:left" >Company Accounts</a> <a href="#" onclick="showHideItems('ef_sidebar');" style="width:120px; color: black; border:solid thin blue; text-decoration:none; padding:0em 2em; margin-left:10px; margin-top:27px; float:left">Comapany Funds</a> <div id="ta_sidebar" style="display:none;position:absolute; left:15px; top:100px; border-style: solid thin blue; background-color:grey;padding: 5px;float:left"> This is the first div that should be displayed when company accounts link is clicked.</div> <div id="ef_sidebar" style="display:none;position:absolute; left:15px; top:100px; border-style: solid thin blue; background-color: grey;padding: 5px;float:left">This is the second div that should be displayed when company funds link is clicked and should hide first div </div> </body> </html> The two divs overlaps each other or placed on each other so they are displayed in the same place. I appreciate your response. Thanks, PK
replace your script part with this: <script type="text/javascript" language="JavaScript"><!-- function showHideItems(myItem){ document.getElementById(myItem).style.display = "block"; switch (myItem){ case "ta_sidebar": document.getElementById("ef_sidebar").style.display = "none"; break; case "ef_sidebar": document.getElementById("ta_sidebar").style.display = "none"; break; } } //--></script>
Hi, Thanks for your response. Your code doesn't solve the problem. If you see my code properly, the parameter that function is getting is either ta_sidebar or ef_sidebar. So, if I do as you suggested, it will first display and then when it enters into switch case, it will make it none again & it won't even go to other case......... I hope I made it clear. Thanks, PK
i guess im not sure what you are looking for. I've tested the code I put up and does what I think you want. It always hides the opposite one than the one that was clicked. what the code does is the first line makes the one visible like you said but the switch doesnt do what you are saying. when its case "ta_sidebar": it hides "ef_sidebar" and does not hide ta_sidebar again. It displayed ta_sidebar in the above line, and hides ef_sidebar in this line. give it a try