Javascript to show/hide tables

Hi all

i am currently working on this page:
http://www.engineeringpartners.com.au/new%5Fpage/recent_projects.html

The current version is a prototype. if you click on any of the links, you will notice that a completely new html page loads. eg if you click retail, then retail.html will load, however you will notice that it is only the table down the bottom and header which is different for each page. What i hope to have when complete is a whole heap of tables and headers on the one html page hidden away and then depending on which link the user clicks on the corresponding table and header will appear without having to load a new page each time.

I do not know any javascript so if someone could point me in the right direction it would be greatly appreciated. (I assume javascript would be the best way to do this, but if there are other ways im open to suggestions!)

Thanks

 

<script>
	function showhide(id){ 
		if (document.getElementById){ 
			obj = document.getElementById(id); 
			if (obj.style.display == "none"){ 
				obj.style.display = ""; 
			} else { 
				obj.style.display = "none"; 
			} 
		} 
	} 
</script>

Code (markup):

Create table or div

<div id="abc">Div or table content go here</div>

Code (markup):

On action:

<a href="javascript:showhide('abc');">Show/Hide</a>

Code (markup):

I hope it helps.

regards

 

thanks mate. will give it a go and let you know how it works

 

it works! which is good, but i would like to make a few modifications.

1. on loading the page, the div's should all be hidden by default
2. clicking on another link should close the one currently open. eg if you are viewing commercial offices and then click on retail, the commercial offices div should close before retail opens.
3. if you click on any of the other links which i have not added javascript to, you will notice that the links colour changes to orange. i would also like the javascript ones to do the same thing (and change back if another link is pressed).

again, any help would be greatly appreciated.

thanks
mitch

edit: i tried working on the colour changing myself, but havnt quite succeeded! it changes to orange but wont seem to change back

function onClick(div, li){
	showHide(div);
	colourChange(li);
}

function showHide(id){ 
	if (document.getElementById){ 
		obj = document.getElementById(id); 
		if (obj.style.display == "none"){ 
			obj.style.display = ""; 
		} else { 
			obj.style.display = "none"; 
		} 
	} 
} 

function colourChange(id){
	if (document.getElementById){
		obj = document.getElementById(id);
		if (obj.style.color == "#DAA12F"){
			obj.style.color = "#666";
		} else {
			obj.style.color = "#DAA12F";
		}
	}
}

Code (markup):

you can view it in action at the link at the top

edit 2: sorry about the multiple edits, but im trying to solve the problem at the same time. i found this nice peice of code which lets me close all of the divs on load

window.onload = function(){ 
	showHide('abc');
	showHide('abcd');
}

Code (markup):

however, given that i might be hiding up to several mb's of images, there might be some significant lag before everything loads and when stuff starts to hide. is there any other way to be hiding the divs right from the start?

 

This might be wrong. You must hide layer by default this way:

<div id="abc" style="display:none">.......</div>

regards

 

excellent, that works exactly. thanks again! also i managed to fix the colour changing problem myself!
any luck on finding a way to close any open div's? this is the only problem which hasnt been solved yet.
i added a class to the divs as well as an id. im guessing i would have to somehow loop through all of the divs on the page and check to see whether they belong to the class, if they do then run the showHide method on them. i just havnt found a way of doing this yet!

 

I cant believe it, but i solved the problem!
here is the finished js. someone else might also find it helpful

function onClick(div, li){
	if (document.getElementById){
		obj = document.getElementById(div);
		if (!obj.style.display == ""){
			hideAll();
		} else {
		}
	}
	showHide(div);
	colourChange(li);
}

function hideAll(){
	divs = document.getElementsByTagName("div");
	li = document.getElementsByTagName("a");
	for (i=0; i<divs.length; i++){ 
		if (divs[i].className == "projdiv"){
			if (divs[i].style.display == ""){
				divs[i].style.display = "none";
			}
		}
	}
	
	for (i=0; i<li.length; i++){ 
		if (li[i].className == "li"){
			li[i].style.color = "#666";
		}
	}
}

function showHide(id){ 
	if (document.getElementById){ 
		obj = document.getElementById(id); 
		if (obj.style.display == "none"){ 
			obj.style.display = ""; 
		} else { 
			obj.style.display = "none"; 
		} 
	} 
} 

function colourChange(id){
	if (document.getElementById){
		obj = document.getElementById(id);
		if (!obj.style.color | obj.style.color == "#666"){
			obj.style.color = "#DAA12F";
		} else {
			obj.style.color = "#666";
		}
	}
}

Code (markup):

 

Hi,

You can try this example from below site.
http://www.codeasearch.com/hide-and-show-div-tag-using-jquery-and-javascript.html