JQuery: Toggle show/Hide Div or any DOM Element

.toggle() method is being used to display or hide the DOM element like DIV, Button etc. and toggle method is being fired with different set of argument .

• .toggle()
• .toggle(display : Boolean)
• .toggle(duration,[])

 .toggle() method simply change the CSS display property of element, if it is displayed,it changes to ‘block’ value and if it hides, it changes to ‘none’ value to display property of element

.toggle() -  with no parameters  :

the .toggle () method simple toggles the visibility of elements . It means if element is displayed, it will be hidden and if it is hidden, it will be displayed.

$('.div').toggle();

.toggle(display : Boolean) – with display parameter :

If you pass true as display parameter, it show the element and if you pass false, it hide the element.

$('.div').toggle(true);   //// show matched elements

$('.div').toggle(false); ///// hide matched elements

.toggle(speed,easing,callback) with speed and easing parameters

This toggle () method allows to create the visual effect by using speed, easing parameter

 Parameters :

              speed – it specify the speed of the hide and show visual effect and available possible options  [ milliseconds, slow, fast]

              easing – it specify the different points of animation of show/hide effect and available options [ swing, linear]

            callback – it is a function pointer when toggle method is completed, the pointer function will be executed

        $('.div').toggle('slow', 'swing');

Thanks for visiting!!