toggling 2 elements

I want to toggle two elements making one display none and the other display block. And by clicking again switch the displays:

		<script type="text/javascript" language="javascript1.3">
			function toggle(id){
				regid = "regid_" + id;
				img = "img_" + id;
				forumid = "forumid_" + id;
				divElement = document.getElementById(regid);
				imgElement = document.getElementById(img);
				forumElement = document.getElementById(forumid);
				if (divElement){
						if (divElement.className == 'closed'){
								divElement.className = "open";
								forumElement.classname = "closed";
								imgElement.src = "includefiles/images/opened.gif";
								}else{
								divElement.className = "closed";
								forumElement.classname = "open";
								imgElement.src = "includefiles/images/closed.gif";
								}
						}
				}
				/*function toggle(id) {
					var el = document.getElementById("regid_" + id);
					if ( div.style.display = 'block' ) {
						div.style.display = 'none';
					}
					else {
						div.style.display = 'block';
					}
				}*/				
		</script>
		<style type="text/css">		
			.open {
				display: block;
			}
			.closed {
				display: none;
			}
		</style>		
			<table class="" id="" border="1" style="border: 1px;">
<tr>
<td id="tdid_0">
<div id="regid_0" class="closed" style="display: block;"><a onclick="toggle('item0');"><img src="includefiles/images/closed.gif" id="img_item0" alt="Click to Expand" border="0" /></a>blablah</div><br />

<div id="forumid_0" class="open" style="display: none;">gagah googoooh</div><br /></td>

</tr>

Code (markup):

 

You question is a bit unspecific, but taking a quick look at your code I found that you some times use classname, instead className with a capital N. Javascript is case sensitive.

Cheers

 

At the click of a button or link I want the following to switch to the second below.

From:

<div id="regid_0" class="closed" style="display: block;">blablah</div>

Code (markup):

To:

<div id="forumid_0" class="open" style="display: none;">gagah googoooh</div>

Code (markup):

And back.

 

I see your point. But you have one big problem in your code. You are assigning a class open which represents objects with style.display attribute set to block, and then you specify the style.display attribute directly into the element with the value none...

Also, you call toggle('item0'), and in your code you have:

regid = "regid_" + id; //equals regid_item0
img = "img_" + id; //equals img_item0
forumid = "forumid_" + id; //equals forumid_item0

Code (markup):

But your elements have the ids img_item0 (match), regid_0 (don't match), forumid_0 (don't match)

Also, there is another issue... After the first click, you'll be hidding the link which contains the javascript function, after that, there is no way of making another click... Perhaps you want to put the link outside the switching divs, or put the event handler on the table element...

Taking these considerations, I rewrited your code keeping it as close to your original code as possible, but is difficult without knowing what you want. But this should help you to get on tracks ;-)

	<script type="text/javascript">
		
			function toggle(id){
				regid = "regid_" + id;
				img = "img_" + id;
				forumid = "forumid_" + id;
				divElement = document.getElementById(regid);
				imgElement = document.getElementById(img);
				forumElement = document.getElementById(forumid);

				if (divElement){
						if (divElement.style.display == 'none'){
								divElement.style.display = "block";
								forumElement.style.display = "none";
								imgElement.src = "includefiles/images/opened.gif";
						}else{
								divElement.style.display = "none";
								forumElement.style.display = "block";
								imgElement.src = "includefiles/images/closed.gif";
								}
						}
				}			
		</script>	
			<table class="" id="" border="1" style="border: 1px;">
<tr>
<td id="tdid_0" onclick="toggle('item0')">
<div id="regid_item0" style="display: block;"><img src="includefiles/images/closed.gif" id="img_item0" alt="Click to Expand" border="0" />blablah</div><br />

<div id="forumid_item0" style="display: none;">gagah googoooh</div><br /></td>

</tr>
</table>

Code (markup):

Geel free to ask for more, he he.

Cheers