Skip to content
Related Articles

Related Articles

Improve Article

script.aculo.us Toggle Effects Utility

  • Last Updated : 14 Dec, 2020

Toggle Effects utility is used for toggling elements with additional animations. It supports three animation props Appear, Blind and Slide.

  • Appear: It simulates the Appear Effect module for hiding and showing elements
  • Slide: It simulates the SlideUp, SlideDown effect modules for hiding and
    showing elements.
  • Blind: It simulates the BlindUp and BlindDown effect modules for hiding and
    showing elements.

Syntax:

Effect.toggle(element_id, Animation Prop, {options} );

Example:




<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
        src="./javascript/prototype.js">
    </script>
  
    <script type="text/javascript" 
src="./javascript/scriptaculous.js?load = effects">
    </script>
  
    <script>
        function AppearEffect(element) {
            new Effect.toggle(element, 'Appear', {
                duration: 3
            });
        }
  
        function BlindEffect(element) {
            new Effect.toggle(element, 'Blind', {
                duration: 3
            });
        }
  
        function SlideEffect(element) {
            new Effect.toggle(element, 'Slide', {
                duration: 3
            });
        }
    </script>
</head>
  
<body>
    <div>
        <Button onclick="AppearEffect('element')"
                 Appear Effect</Button>
        <Button onclick="SlideEffect('element')"
                 SlideEffect</Button>
        <Button onclick="BlindEffect('element')"
                 BlindEffect</Button>
    </div>
      
    <div id='element'>
        <img src="gfg.png" />
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :