jQuery Hide and Show Effects: hide() & show() methods

The hide() method hides the elements that have been selected.

It is identical to the display: none CSS attribute. It should be noted that you will not be able to see the hidden items as it doesn’t affect the layout of the page. 

Tip: Look at the show() method to reveal hidden items.

Syntax for hide method in jQuery

$(selector).hide(speed,easing,callback)

Example of jQuery hide function

Toggle the visibility of all

elements:

$("button").click(function(){
  $("p").hide();
});

The concealed, selected items are displayed using the show() method in jQuery.

Note that show() works on components that have been hidden using jQuery techniques and CSS display: none (but not visibility: hidden).

Tip: Look at the hide() method to conceal elements.

Syntax for show method in jQuery

$(selector).show(speed,easing,callback)

Example of jQuery show function

Show all

components that are hidden:

$("button").click(function(){
  $("p").show();
});

For the selected items, the toggle() method toggles between hide() and show().

The toggle effect function verifies the visibility of the specified components. In case an element is hidden, show() is called. If a component is visible, hide() is called, which creates a toggle effect.

It should be noted that hidden items will not be visible (no longer affects the page's layout).

Tip: You can also use this approach to switch between custom functions.

Syntax for toggle method in jQuery

$(selector).toggle(speed,easing,callback)

Example of jQuery toggle function

For all

elements, toggle between hiding and showing:

$("button").click(function(){
  $("p").toggle();
});