Topics

jQuery Show/Hide

The jQuery show() and hide() methods can used to show and hide HTML elements.

The hide() method is used to sets the inline style display (none for the selected elements). In contrast, the jQuery show() method restores the display properties of the matched set of elements to what they were initially; typically block, inline, or inline-block; before the inline style display ( none was applied to them). Below is an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Show Hide Effects</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Hide Paragraphs</button> 
    <button type="button" class="show-btn">Show Paragraphs</button>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</body>
</html>

Try with example

More so, you can specify optionally the duration (or speed) parameter for making the jQuery show hide effect animated over at the specified time.

You can specify durations either using one of the predefined strings 'slow' or 'fast', or in several milliseconds, in the case where greater precision is needed; higher values indicate slower animations.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animated Show Hide Effects</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Hide Paragraphs</button> 
    <button type="button" class="show-btn">Show Paragraphs</button>
    <p class="very-fast">This paragraph will show/hide with very fast speed.</p>
    <p class="normal">This paragraph will show/hide with default speed.</p>
    <p class="fast">This paragraph will show/hide with fast speed.</p>
    <p class="slow">This paragraph will show/hide with slow speed.</p>
    <p class="very-slow">This paragraph will show/hide with very slow speed.</p>
</body>
</html>

Try with example

The callback function can be specified to be executed after the show() or hide() method completes. In subsequent tutorials, we'll learn more about the callback function.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Show Hide Effects with Callback</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Hide Paragraphs</button> 
    <button type="button" class="show-btn">Show Paragraphs</button>
    <p>This is a paragraph.</p>
</body>
</html>

Try with example

jQuery toggle() Method

The toggle() method in a jQuery show or hide the elements in a way that if the element is displayed initially, it will be hidden; but if hidden, it will be displayed (i.e it toggles the visibility).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Toggle Effect</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Toggle Paragraphs</button> 
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</body>
</html>

Try with example

Same also, the duration parameter for the toggle() method can be specified to make it animated like the show() and hide() methods.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animated Toggle Effect</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Toggle Paragraphs</button>
    <p class="very-fast">This paragraph will show/hide with very fast speed.</p>
    <p class="normal">This paragraph will show/hide with default speed.</p>
    <p class="fast">This paragraph will show/hide with fast speed.</p>
    <p class="slow">This paragraph will show/hide with slow speed.</p>
    <p class="very-slow">This paragraph will show/hide with very slow speed.</p>
</body>
</html>

Try with example

Also, you can specify a callback function for the jQuery toggle() method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Toggle Effect with Callback</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Toggle Paragraphs</button> 
    <p>This is a paragraph.</p>
</body>
</html>

Try with example