JQuery: toggling an element's visibility example

This page uses JQuery to change the an element's individual CSS style.

This is a paragraph of text. When a user clicks the "Hide" button above, this paragraph will disappear.
If the user then clicks the "Show" button, this paragraph will reappear.
This works by using JQuery's show() and hide() functions of any element.

If you recall, in a previous example, we directly changed the CSS display property from "block" to "none" to hide any element without JQuery.

This technique using JQuery is better because it does not require any changes to the XHTML code - all the behaviors are coded in Javascript, which means the code responsible for behaviors is clearly separated from the markup code. Plus, the syntax is more standardized than the default Javascript way of doing things in Javascript, which is usually totally inconsistent.