Changes

Jump to: navigation, search

JavaScript and CSS - Dynamic Styles and Layers

231 bytes added, 18:50, 17 May 2007
no edit summary
</pre>
== Hiding and Showing Content suing Using JavaScript ==
The next step is to look at how to hide and show contents using CSS and JavaScript. First lets create some paragraphs a paragraph of text in HTML:
<pre>
<p id="layer1">This is layer 1</p>
<p id="layer2">This is layer 2</p>
<p id="layer3">This is layer 3</p>
</pre>
Next we need to define some styles for these layers so that we can distinguish between them (for details on CSS see [[Understanding Cascading Style Sheets (CSS)]]:
 
<pre>
 
<style type="text/css">
 
#layer1 {
background-color: yellow;
height:90px;
width:90px
left:0px;
top:0px;
visibility: hidden;
}
 
Now we can combine these into an HTML file together with buttons which changes the ''visibility'' property of of the style property to either ''visible'' or ''hidden'':

Navigation menu