ted_chou12 Posted June 15, 2009 Share Posted June 15, 2009 Hi, i am trying to set the visibility of multiple divs, so if the user clicks on one div, the rest hides, and only this one shows up, here is the js: function setvisibility(id) { var obj = document.getElementById(id); if (obj.style.visibility == "hidden") { var numcount = 1; while (numcount <= 99) {var obj2 = document.getElementById("tab" + numcount); obj2.style.visibility = "hidden"; numcount ++;} obj.style.visibility = "visible"; } else {obj.style.visibility = "hidden";} } obj is the one that is clicked on, and obj2 is the rest looping through while, here is the tabs in html: <li><a onclick="javascript: setvisibility('tab1');"><span><?php echo $type;?></span></a></li> <li><a onclick="javascript: setvisibility('tab2');"><span><?php echo $type;?></span></a></li> <li><a onclick="javascript: setvisibility('tab3');"><span><?php echo $type;?></span></a></li> <li><a onclick="javascript: setvisibility('tab4');"><span><?php echo $type;?></span></a></li> <li><a onclick="javascript: setvisibility('tab5');"><span><?php echo $type;?></span></a></li> <div id=\"tab1\" class=\"tabs\">content1</div> <div id=\"tab2\" class=\"tabs\">content1</div> <div id=\"tab3\" class=\"tabs\">content1</div> <div id=\"tab4\" class=\"tabs\">content1</div> <div id=\"tab5\" class=\"tabs\">content1</div> The problem is that nothing is showing up, and when clicking the link, nothing shows up as well. I am using while to loop until 9 because I don't know how many tabs there will be, so im assuming the no of tabs dont exceed 99, if anyone knows how to get the number of tabs to a variable in js, that would help a lot as well. Thanks, Ted Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 15, 2009 Share Posted June 15, 2009 Change the onclick calls to only send the numerical part of the DIV ID. Then use the function shown below: <html> <head> <script language="javascript"> function setvisibility(id) { for (var tabIdx=1; tabObj=document.getElementById('tab'+tabIdx); tabIdx++) { tabObj.style.visibility = (id==tabIdx) ? 'visible' : 'hidden'; } return; } </script> </head> <body> <li><a onclick="javascript: setvisibility(1);"><span>One</span></a></li> <li><a onclick="javascript: setvisibility(2);"><span>Two</span></a></li> <li><a onclick="javascript: setvisibility(3);"><span>Three</span></a></li> <li><a onclick="javascript: setvisibility(4);"><span>Four</span></a></li> <li><a onclick="javascript: setvisibility(5);"><span>Five</span></a></li> <div id="tab1" class="tabs">content1</div> <div id="tab2" class="tabs">content2</div> <div id="tab3" class="tabs">content3</div> <div id="tab4" class="tabs">content4</div> <div id="tab5" class="tabs">content5</div> <body> </html> Quote Link to comment Share on other sites More sharing options...
impulse Posted September 14, 2009 Share Posted September 14, 2009 was skimming through for a js function related to visibility of divs...this function helped a lot. thnx 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.