Copyright © tutorialspoint.com

# script.aculo.us toggle Effects Utility

## Description:

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

For example, this checks if 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:

You can syntax form to use 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 common parameters.

## Example:

    <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>

To understand it in better way you can Try it yourself.

Copyright © tutorialspoint.com