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 Link to comment https://forums.phpfreaks.com/topic/162195-solved-multiple-stylevisibility-set/ 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> Link to comment https://forums.phpfreaks.com/topic/162195-solved-multiple-stylevisibility-set/#findComment-856031 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 Link to comment https://forums.phpfreaks.com/topic/162195-solved-multiple-stylevisibility-set/#findComment-918068 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.