script.aculo.us - Toggle Effects Utility

Description

The Effect.toggle allows you to toggle between hide and show, slide up and slide down, and blind up and blind down.

For example, it checks if the element is in hide state, then it will show that element.

This utility function is most useful in scripts where the current state of the element is unknown or moot, and toggling the element to the opposite state is all that matters.

Syntax

Use the following syntax for this effect −

Effect.toggle( element, [effectType], [options] );

Where effectType is one of the strings −

If effectType is set to appear, the Fade and Appear effects are used to toggle the element into and out of visibility.
If effectType is set to slide, the SlideUp and SlideDown effect are used.
If effectType is set to blind, the BlindUp and BlindDown effect are used.

If the effectType is omitted, the default is appear

Effect-Specific Parameters

This effect does not have any other parameter except the common parameters.

Example

Live Demo

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects"></script>
		
      <script type = "text/javascript">
		
         function AppearEffect(element){
            new Effect.toggle(element, 'Appear', {duration:3});
         }
			
         function BUDEffect(element){
            new Effect.toggle(element,'Blind', {duration:3});
         }
			
         function SUDEffect(element){
            new Effect.toggle(element,'Slide', {duration:3});
         }
      </script>
		
   </head>
   <body>
	
      <div onclick="AppearEffect('myimage')">
         Click me to hide and show the image
      </div>
      <br />

      <div onclick="BUDEffect('myimage')">
         Click me to Blind Up and Blind Down the image
      </div>
      <br />

      <div onclick="SUDEffect('myimage')">
         Click me to Slide Up and Slide Down the image
      </div>
      <br />

      <div id="myimage" onclick="AppearEffect(this);">
         <img src = "/images/scriptaculous.gif" alt = "script.aculo.us" />
      </div>
		
   </body>
</html>

This will produce following result −

scriptaculous_effects.htm