How to hide/unhide web contents on the same web page?

I am fasinated by hiding and unhiding web contents.

Have seen some web site doing the above. When you check a checkbox called "More Info", more web contents will be displayed on the same page below the checkbox. When you uncheck "More Info" checkbox, previously displayed web contents will be hidden.

New to web programming. Is there any sample javascript to do this?

Thanks for your help in advance.

 

A good example is:
http://www.consumer.philips.com/consumer/en/us/consumer/cc/_language_us/_productid_DVP3980_37_US_CONSUMER

In the above web page, the little triangle "pointing right" hides web contents.

Click on it will change the little triangle "pointing down" to unhide web contents.

What is the javascript search name for this hide/unhide technique?

Thanks.

 

add in "head" section of your page

<script type="text/javascript">
function hide(area){
	var obj = document.getElementById(area);
	if(obj.style.display=="none"){
		obj.style.display=="block";
	} else {
		obj.style.display=="none";
	}
}
</script>

Code (markup):

now, say you wanted to hide the divider named "content", just make this as a link

<a href="#" onClick="hide("content");>toggle content area</a>

when you click the link, it will open and close the area with the id "content"

you can reuse this with any area, as long as you have the id set

 

what crat told is right, one small thing i would like to add is the calling of a js function from a link
i.e this particular line

when you click this you get a # appended to the link in the address bar, what you can do to avoid this is

hope this helps too

 

Hi guys,

Takings things one step further, would it be possible to have an "add" button that would add input fields vertically up to a maxim of, say, 10?

This would be useful in forms where people need to enter varying amounts of values

 

"innerhtml" is another option for hiding and unhiding content.

Q...

 

well i use jquery but it land me in to problem when putting links in the content in internet explorer