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

JQuery - Dynamically Add or Remove CSS

In this blog, we will discuss about add or remove CSS class by JQuery and you can easily apply or remove CSS style class on DOM element dynamically.

JQuery provides several methods for CSS class manipulation:

·         addClass()

·         removeClass()

·         toggleClass()

·         css()

CSS Class

.hideDom

        {

            display: block;    

        }

Add CSS:

You have several way to add CSS class or apply CSS property on element.

addClass() :  the addClass() method add the CSS class on the selected DOM element.

Syntax:

  $('jQuery selector'). addClass ({"css class name"});

Example: hide ddlEmployee dropdown element

$('#ddlEmployee').addClass(".hideDom")

css() : the css() method set CSS style class on the selected DOM element

Syntax:

$('jQuery selector').css({"css property name":"css property value"});

Example: Change Paragraph text color to blue

$('p').css({"color":"blue"});

Remove CSS:

You have several way to remove the applied CSS class or CSS property from element.

removeClass() :  the removeClass() method remove the CSS class from the selected DOM element.

Syntax:

  $('jQuery selector'). removeClass ({"css class name"});

Example:

$('#ddlEmployee').removeClass(".hideDom")

css() : the css() method set blank value applied CSS property

Syntax:

$('jQuery selector').css({"css property name":"css property value"});

Remove the CSS style property ‘Color’ from DOM element

$('p').css({"color":""})

Thanks for visiting!!