Hide or Show javascript part 1

Posted under » JavaScript on 13 March 2009

One of the benefits of JavaScript is that it can be easily used to manipulate elements on a page without having to refresh. For example, you want to hide certain things from view in order to prevent clutter and keep the page neat. You won't want all of these to appear at once, so we can hide them with CSS and use JavaScript to show them on demand by manipulating the styling.

Put this on your header.


Then put your text on the body of the HTML like so. Don't forget to put the id.

 

By default, it is hidden although its there because of the display:none property. In order to show it, you have to trigger a javascript event like so.

Where are youz?
 

If you want to hide it back to where it was,

Where are youz?
 

I've also use this method to emulate Flash in and out of scene effect.

You might also be interested in part 2 of hide and seek.


web security linux ubuntu python django git Raspberry apache mysql php drupal cake javascript css AWS data