Home | Scripting Techniques
Big Marvin This site publishes web authoring works done by Big Marvin.

Showing and Hiding Objects

Style sheets properties provide two ways of showing and hiding a menu, an area or any object that can be displayed in a web page. (If you are new to style sheets I suggest that you read a little about it first before you go on. Style sheets are important in all these discussions). There is a display and a visibility property in style sheets which when set to 'none' hides the inner HTML of that division, span, paragrah or what ever tag you changed the property with.

example:

<style type="text/css">
#text1 { display: none; }
#text2 { display: ; }

</style>
...
<div id="text1">
This text will be displayed
</div>
...
<div id="text2">
This text will be hidden
</div>

Initially text1 will be displayed and text2 will be hidden. You can then call functions that change the display property from none which hides it to '' which shows it again.

<script languae=javascript>
function showtext (text_id) {
document.all(text_id).style.display='';
}
function hidetext (text_id) {
document.all(text_id).style.display='none';
}
</script>

example:

Menu Item 1
Menu Item 2
Menu Item 3

This example changes the visibility property from hidden to visible. Use the above script which utilizes display and see the difference between visibility and display property.





Email me at: big_marvin@hotmail.com

1