RIRedinPA Posted September 16, 2008 Share Posted September 16, 2008 Hi I'm trying to build a page that will have tabs which I can turn on or off. Only one tab can be on at a time. In my sample I am just working with two but I would like it to be flexible to accomodate multiple tabs. Initially one tab is on and the other(s) will be off. I can get the "off" tab to turn on but I then cannot get the original tab that was on and got shut off to turn back on again. (Hope that made sense). Any help would be appreciated. Here's my 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=UTF-8" /> <title>Untitled Document</title> </head> <style> body { background-color: #eeeeee; margin: 0px; } #tablediv { position: relative; top: 100px; left: 100px; font: Arial, Helvetica, sans-serif; font-size: 12px; color: #663333; } #tablediv a:link { text-decoration: none; color: #663333; } #tablediv a:visited { text-decoration: none; color: #663333; } #tabledivn a:hover { text-decoration: none; color: #FF9933; } #tablediv a:active { text-decoration: none; color: #663333; } #tablediv table { border-right: #6D3A44; } #tablediv th { background-color: #CCCC66; padding-top: 1px; padding-right: 2px; border-left: 1px solid #6D3A44; border-top: 1px solid #6D3A44; border-collapse: collapse; letter-spacing: 1px; text-align: center; vertical-align: middle; } #tablediv td { background-color: #EC7036; } #tab1 { position: absolute; top: 30px; left:0px; display: block; } #tab2 { position: absolute; top: 30px; left:0px; display: none; } .tabbutton { width: 100px; height: 25px; background-color: #CCCC66; border: 1px solid #666633; padding: 2px; } </style> <script langauge="javascript"> function toggleTabs(tabname) { var tabarray = new Array ("tab1", "tab2"); //build opposite display array var oppdisplayarray = new Array(); for (var i=0; i<tabarray.length; i++) { if (tabname != tabarray[i]) { oppdisplayarray = tabarray[i]; } } //set div obj = document.getElementById(tabname); alert(obj.style.display); if (obj.style.display == "none") { //turn on div obj.style.display = "block"; //turn off other divs for (var y=0; y<oppdisplayarray.length; y++) { document.getElementById(oppdisplayarray[y]).style.display = "none"; } } else { //can't turn something on that is already on return; } } </script> <body> <div id="tablediv"><a href="javascript:void(0);" onmousedown="toggleTabs('tab1');" class="tabbutton">Editorial</a> <a href="javascript:void(0);" onmousedown="toggleTabs('tab2');" class="tabbutton">Art</a> <div id="tab1" style="display: block;"> <table cellpadding="3" cellspacing="0" border="1" width="1000" id="etable"> <tr valign="top"> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> </tr> <tr valign="top"> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> </tr> </table> </div> <div id="tab2" style="display: none;"> <table cellpadding="3" cellspacing="0" border="1" width="1000" id="atable"> <tr valign="top"> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> <th>Field Name</th> </tr> <tr valign="top"> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> <td>Field Content</td> </tr> </table> </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/124534-solved-toggle-divs-on-and-off/ Share on other sites More sharing options...
F1Fan Posted September 17, 2008 Share Posted September 17, 2008 I think you're over complicating it a little. It's OK to set something to its current value. Try this for your function: function toggleTabs(tabname){ document.getElementById('tab1').style.display = "none"; document.getElementById('tab2').style.display = "none"; document.getElementById(tabname).style.display = "block"; } Link to comment https://forums.phpfreaks.com/topic/124534-solved-toggle-divs-on-and-off/#findComment-643480 Share on other sites More sharing options...
RIRedinPA Posted September 17, 2008 Author Share Posted September 17, 2008 Thanks, it wouldn't be the first time... Link to comment https://forums.phpfreaks.com/topic/124534-solved-toggle-divs-on-and-off/#findComment-643698 Share on other sites More sharing options...
RIRedinPA Posted September 17, 2008 Author Share Posted September 17, 2008 Here's a more dynamic script... <script langauge="javascript"> function toggleTabs(tabname) { var tabarray = new Array("tab1", "tab2"); for (var i=0; i<tabarray.length; i++) { document.getElementById(tabarray).style.display = "none"; } document.getElementById(tabname).style.display = "block"; } </script> Link to comment https://forums.phpfreaks.com/topic/124534-solved-toggle-divs-on-and-off/#findComment-643758 Share on other sites More sharing options...
F1Fan Posted September 17, 2008 Share Posted September 17, 2008 There ya go! Link to comment https://forums.phpfreaks.com/topic/124534-solved-toggle-divs-on-and-off/#findComment-643773 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.