The show (), hide (), and toggle () Methods

The above effects use the mode option to hide ("hide") or display ("show") the element.

Rather than specifying this option in the options parameter, jQuery UI allows us to specify it using the show () or hide () methods. As for the toggle () method, it toggles the show () or hide () methods depending on whether the element is hidden or not.

Use the following to display an item using the indicated effect:

$(selector, context).show (effectName, options, duration, callback);

Use the following to hide an item using the indicated effect:

$(selector, context).hide (effectName, options, duration, callback);

Use the following to change between showing and hiding the indicated effect:

$(selector, context).toggle (effectName, options, duration, callback);

For example, let’s use these methods with the slide effect instead of the effect () method that we used before. We create a Toggle button, which, when clicked, shows or hides the element by using the slide effect (see Figure 14-12).

Using the toggle () method

Figure 14-12. Using the toggle () method

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<button onclick=toggle()>Toggle </button><br /><br /> <img id=img1 src=images/rails.jpg height=100 /><br /> <img id=img2 src=images/html.jpg height=100 ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.