[SOLVED] Toggle divs on and off

RIRedinPA · 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>

F1Fan · 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";

}

RIRedinPA · September 17, 2008

Thanks, it wouldn't be the first time...

RIRedinPA · September 17, 2008

Here's a more dynamic script...

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>

F1Fan · September 17, 2008

There ya go!

Sign In

[SOLVED] Toggle divs on and off

Recommended Posts

RIRedinPA

Link to comment

Share on other sites

F1Fan

Link to comment

Share on other sites

RIRedinPA

Link to comment

Share on other sites

RIRedinPA

Link to comment

Share on other sites

F1Fan

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information