jQuery Effects - Hide and Show

You can hide and show any HTML elements or part of text with using jquery.


jQuery hide() and show() Methods

The hide() method is used to hide (making invisible) an HTML element at runtime.

The show() method is used to show (making visible) an HTML element at runtime.

Syntax 1:- Basic syntax

$(selector).hide();

$(selector).show();

Syntax 2:- Complete syntax

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

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

The speed and callback parameters are optional.

The optional speed parameter, which can take the values "slow," "rapid," or milliseconds, determines how quickly the hiding/showing happens.

The optional callback parameter is a function to perform after completing the hide() or show() operation (you will learn more about callback functions in a later chapter).

Example 1 :-

The hide() and show() functions in jQuery allow you to hide and reveal HTML elements :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#hide").click(function () {
            $(".test").hide();
        });
        $("#show").click(function () {
            $(".test").show();
        });

        $("#hide2").click(function () {
            $(".test2").hide(1000);
        });
        $("#show2").click(function () {
            $(".test2").show(1000);
        });
    });
</script>
</head>
<body>

<p class="test">If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

<br /><br />
<p class="test2">If you click on the "Hide 2" button, I will disappear slowly.</p>

<button id="hide2">Hide 2</button>
<button id="show2">Show 2</button>

</body>
</html>

Output :-

If you click on the "Hide" button, I will disappear.



If you click on the "Hide 2" button, I will disappear slowly.


Note: In the Hide2 and Show2 button, we have used the speed parameter to make hide and show slowly. The number "1000" is in milliseconds.

You can also search for these topics, jquery id to hide and show effects example, select the option to hide and show jquery, how to use hide and show button using jquery, slide effect use jquery hide and show, jquery hide and show animation and attribute, default hidden used, jquery how to hide and show a div, hide and show message, syntax for jquery hide() and show() effects in jquery.

jQuery toggle() Method

The toggle() function may also be used to toggle an element's visibility between hidden and visible.

Syntax :-

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

The speed and callback parameters are optional.

The optional speed parameter might be "slow," "rapid," or "milliseconds".

The optional callback parameter is a function that has to be run upon completion of toggle().

Example :-

The elements displayed are concealed and hidden :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#toggle").click(function () {
            $("h4").toggle();
        });
    });
</script>
</head>
<body>

<h4>This is a h4 heading.</h4>
<h4>This also a h4 heading.</h4>

<button id="toggle">Toggle between hiding and showing</button><br />

</body>
</html>

Output :-

This is a h4 heading.

This also a h4 heading.




You can also search for these topics, jquery toggle class and attribute example, show hide toggle method using jquery, visibility of toggle method, use of checkbox jquery toggle, jquery toggle multiple classes and elements, multiple div independently used in jquery toggle, syntax for jquery toggle() effects.