jQuery Hide and Show Effects: hide() & show() methods
jQuery hide() Method
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();
});
jQuery show() Method
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();
});
jQuery toggle() Method
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();
});