Jump to content

[SOLVED] Toggle divs on and off


RIRedinPA

Recommended Posts

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

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

}

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>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.