Javascript toggle div visibility

**durks** · 04-20-2007, 09:26 AM

Hi there,

I have put together a simple example of a problem I am trying to solve. I don't have Javascript knowledge, but understand principles of programming, mainly from flash actionscript.

I found a javascript that toggles the visibility of div elements. I have found this useful to create tabbed style menu systems. But the problem I have is if I want to have more than one group of tabs. What happens is that all the hideable elements on my page are toggled, not the ones in the group I want to toggle.

In the example I have attached, I have just mocked up a simple set of 2 groups of links. The "Blue Group" links, when clicked, toggle the visibility of a div that would contain that "Blue Group" information. But if I click one of the "Red Group" links, then the "Red Group" information correctly appears below, but the "Blue Group" information dissapears.

I basically want to be able to just toggle the visibility of the links related to that group of links.

Here is my code :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">
var active_hidden_text = "";
function show_hidden_obj(obj){
	if(document.getElementById(obj).style.display == 'block'){
		document.getElementById(obj).style.display = 'block';
	}
	else{
		document.getElementById(obj).style.display = 'block';
	}
	if(active_hidden_text != "" && active_hidden_text != obj){
		document.getElementById(active_hidden_text).style.display = 'none';
	}	
	active_hidden_text = obj;
}
</script>

</head>

<body onload="show_hidden_obj('BlueGroup1');">

<ul>
  <li id="Bluelink1"><a href='javascript: show_hidden_obj(&quot;Bluegroup1&quot;);'>Blue Group Link 1</a></li>
  <li id="Bluelink2"><a href='javascript: show_hidden_obj(&quot;Bluegroup2&quot;);'>Blue Group Link 2</a></li>
  <li id="Bluelink3"><a href='javascript: show_hidden_obj(&quot;Bluegroup3&quot;);'>Blue Group Link 3</a></li>
</ul>

<div id="Bluegroup1" style="display: none;">Blue Group description 1</div>
<div id="Bluegroup2" style="display: none;">Blue Group description 2</div>
<div id="Bluegroup3" style="display: none;">Blue Group description 3</div>

<ul>
  <li id="Redlink1"><a href='javascript: show_hidden_obj(&quot;Redgroup1&quot;);'>Red Group Link 1</a></li>
  <li id="Redlink2"><a href='javascript: show_hidden_obj(&quot;Redgroup2&quot;);'>Red Group Link 2</a></li>
  <li id="Redlink3"><a href='javascript: show_hidden_obj(&quot;Redgroup3&quot;);'>Red Group Link 3</a></li>
</ul>

<div id="Redgroup1" style="display: none;">Red Group description 1</div>
<div id="Redgroup2" style="display: none;">Red Group description 2</div>
<div id="Redgroup3" style="display: none;">Red Group description 3</div>

</body>
</html>

**rdoyle720** · 04-20-2007, 09:34 AM

If I understand correctly, it's because of when you set the variable "active_hidden_text". If you click blue and then click red, your code says "what I just clicked was red, but 'active_hidden_text' is blue, so I'll hide that". Basically you just need to set "active_hidden_text" before your if statement.

**durks** · 04-20-2007, 09:44 AM

Hi rdoyle720,

Thanks for the quick reply.

I have tried placing the "active_hidden_text = obj;" bit of code in different places in the javascript code, but that hasn't fixed anything.

What happens if I move it any where else is that none of the hidden divs ever get hidden again after they're shown.

**rdoyle720** · 04-20-2007, 01:01 PM

Ok, ok. I was misunderstanding what you want to do. Basically you just want one blue item and one red item to be visible at one time, right?

Basically as your code was originally set up, it hides the last clicked item, regardless of whether it's blue or red. There are a few different ways you could get what you want. One way would be to write a separate function for each color. That's probably the easiest, but not as clean.

Another way would be to pass some sort of variable so it knows which color you're clicking. So instead of just passing "obj" you might pass it "obj" and "color" and keep track of the last clicked item for each color.

Or, you could create arrays of the possible items for each color, and use that to loop through and hide all the elements for that color, then show the clicked one.

**durks** · 04-20-2007, 01:05 PM

Thanks for your help again rdoyle720.

But luckily I got some help from a kind person. The solution :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
div.hidden
{
	display:none;
}
div.visible
{
	display:block;
}
</style>

<script type="text/javascript">
var groupTotals = {}

groupTotals.Bluegroup = 3;
groupTotals.Redgroup = 3;

function toggle( group, index )
{
	var list = [];
	var i = groupTotals[group];

	while( i > 0 )
	{
		var o = document.getElementById( group + i );

		if( i == index )
		{
			o.className = "visible";
		}
		else
		{
			o.className = "hidden";
		}

		i --;
	}
}
</script>

</head>

<body onload="toggle('Bluegroup', 1)">

<ul>
  <li id="Bluelink1"><a href='javascript: toggle("Bluegroup", 1)'>Blue Group Link 1</a></li>
  <li id="Bluelink2"><a href='javascript: toggle("Bluegroup", 2)'>Blue Group Link 2</a></li>
  <li id="Bluelink3"><a href='javascript: toggle("Bluegroup", 3)'>Blue Group Link 3</a></li>
</ul>

<div id="Bluegroup1">Blue Group description 1</div>
<div id="Bluegroup2" class="hidden">Blue Group description 2</div>
<div id="Bluegroup3" class="hidden">Blue Group description 3</div>

<ul>
  <li id="Bluelink1"><a href='javascript: toggle("Redgroup", 1)'>Red Group Link 1</a></li>
  <li id="Bluelink2"><a href='javascript: toggle("Redgroup", 2)'>Red Group Link 2</a></li>
  <li id="Bluelink3"><a href='javascript: toggle("Redgroup", 3)'>Red Group Link 3</a></li>
</ul>

<div id="Redgroup1" class="hidden">Red Group description 1</div>
<div id="Redgroup2" class="hidden">Red Group description 2</div>
<div id="Redgroup3" class="hidden">Red Group description 3</div>

</body>
</html>

**hothousegraphix** · 04-24-2007, 02:44 PM

durks,

I noticed that in establishing your ID's you've applied them to multiple elements on in your document. ID's are intended
for unique occurrences of an element in a document. If it's important to you - your document will not validate when applying
ID names in this manner.

What you're actually doing is defining "classes". Multiple occurrences of like elements in a document.

Trouble is, the "getElementByClass" method does not exist natively. To use it you would have to define it first. Below is a function
I use regularly to target class elements.

Code:

//getElementsByClass Written By: Dustin Diaz
//http://www.dustindiaz.com/getelementsbyclass/

//Slight minor modification by: Jon Christopher
//http://www.MondayByNoon.com                   */

function getElementsByClass(node,searchClass,tag) {
	var classElements = new Array();
	var els = node.getElementsByTagName(tag); // use "*" for all elements
	var elsLen = els.length;
	var pattern = new RegExp("\\b"+searchClass+"\\b");
	for (i = 0, j = 0; i < elsLen; i++) {
	      if ( pattern.test(els[i].className) ) {
	      classElements[j] = els[i];
	      j++;
	      }
	}
	return classElements;
}

If you simply place this in the head of your document, then replace all of your getElementById calls
with getElementsByClass, you should be good to go.

EDIT:
oppps...my bad, to call the getElementsByClass you would format the call as such:

Code:

getElementsByClass(node,searchClass,tag)
//E.G.
var myEls = getElementsByClass(document,'catTable','table');

[/CODE]

Thread: Javascript toggle div visibility

Thread Tools

Display

Javascript toggle div visibility

Posting Permissions