Hide/Show the following DIV if clicked?

kenshn111 · 12-28-2011, 11:04 AM

I know that this can be done using .hide/.show... I don't know how to say this but if you'll look at the code:

Code:

<div id="isclickable">
klasdlkasdklaklsjd
<div id="weeeee">
trolololololol
</div>
</div>
<div id="isclickable">
klasdlkasdklaklsjd
<div id="weeeee">
trolololololol
</div>
</div>

The div having an id of "weeeee" will show if id="isclickable" is clicked.. but not all divs having "weeeee" should show but instead what is inside the div "isclickable" is there a way to attain this without creating multiple scripts and ids?

Thanks>

chump2877 · 12-28-2011, 11:29 AM

something like the following:

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>TITLE</title>
</head>
<body>

<div id="containerDiv">
	<div id="isclickable1" class="isclickable">
		klasdlkasdklaklsjd
		<div id="weeeee1" class="weeeee" style="display:none">
			trolololololol
		</div>
	</div>

	<div id="isclickable2" class="isclickable">
		klasdlkasdklaklsjd
		<div id="weeeee2" class="weeeee" style="display:none">
			trolololololol
		</div>
	</div>
</div>

<script type="text/javascript">
	function attachToggleDivHandler(divObj)
	{
		divObj.onclick = function()
		{
			var isclickableDivs = this.getElementsByTagName('div');
			for (var j=0; j<isclickableDivs.length; j++)
			{
				if (isclickableDivs[j].className == "weeeee")
				{
					isclickableDivs[j].style.display = (isclickableDivs[j].style.display == "block") ? "none" : "block";
				}
			}
		};
	}

	window.onload = function()
	{
		var containerDivDivs = document.getElementById('containerDiv').getElementsByTagName('div');
		for (var i=0; i<containerDivDivs.length; i++)
		{
			if (containerDivDivs[i].className == "isclickable")
			{
				attachToggleDivHandler(containerDivDivs[i]);
			}
		}
	};
</script>

</body>
</html>

kenshn111 · 12-28-2011, 01:10 PM

Thank you very much!!