javascriptroom blog

jQuery | Hide/Show, Toggle, and Fading Methods with Examples

jQuery is a fast, small, and feature - rich JavaScript library. It simplifies HTML document traversing, event handling, animating, and Ajax interactions. One of the most useful aspects of jQuery is its built - in methods for hiding, showing, toggling elements, and creating fading effects on web pages. These methods are not only easy to use but also add a great deal of interactivity to your web applications. In this blog post, we will explore the hide, show, toggle, and fading methods in jQuery with detailed examples.

2026-07

Table of Content#

  1. Prerequisites
  2. Hide and Show Methods
    • Basic Syntax
    • Example Usage
    • Common Practices
  3. Toggle Method
    • Syntax and Explanation
    • Example
    • Best Practices
  4. Fading Methods
    • FadeIn
    • FadeOut
    • FadeToggle
    • FadeTo
    • Examples for each Fading Method
  5. Conclusion
  6. References

Prerequisites#

Before you start using jQuery's hide, show, toggle, and fading methods, you need to have a basic understanding of HTML, CSS, and JavaScript. Also, you need to include the jQuery library in your HTML file. You can either download the jQuery library and host it locally or use a CDN (Content Delivery Network). Here is an example of including jQuery from a CDN:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <title>jQuery Examples</title>
    <script src="https://code.jquery.com/jquery - 3.6.0.min.js"></script>
</head>
 
<body>
 
</body>
 
</html>

Hide and Show Methods#

Basic Syntax#

The hide() method is used to hide selected elements, and the show() method is used to display the hidden elements.

// Hide selected elements
$(selector).hide(speed, callback);
// Show selected elements
$(selector).show(speed, callback);
  • selector: It is used to select the HTML elements on which you want to apply the method.
  • speed (optional): It specifies the speed of the hiding or showing effect. It can be slow, fast, or a number representing the time in milliseconds.
  • callback (optional): It is a function to be executed after the hide or show effect is completed.

Example Usage#

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <title>Hide and Show Example</title>
    <script src="https://code.jquery.com/jquery - 3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#hideButton").click(function () {
                $("p").hide("slow");
            });
            $("#showButton").click(function () {
                $("p").show(1000);
            });
        });
    </script>
</head>
 
<body>
    <button id="hideButton">Hide Paragraph</button>
    <button id="showButton">Show Paragraph</button>
    <p>This is a sample paragraph.</p>
</body>
 
</html>

In this example, when the "Hide Paragraph" button is clicked, the paragraph element will be hidden slowly. When the "Show Paragraph" button is clicked, the paragraph will be shown in 1000 milliseconds.

Common Practices#

  • Use appropriate speed values. If you want a smooth user experience, avoid using extremely fast or slow speeds.
  • Always enclose your jQuery code inside the $(document).ready() function to ensure that the DOM is fully loaded before the code is executed.

Toggle Method#

Syntax and Explanation#

The toggle() method toggles between the hide() and show() methods. If the selected element is visible, it will be hidden. If it is hidden, it will be shown.

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

The parameters speed and callback have the same meaning as in the hide() and show() methods.

Example#

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <title>Toggle Example</title>
    <script src="https://code.jquery.com/jquery - 3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#toggleButton").click(function () {
                $("p").toggle("fast");
            });
        });
    </script>
</head>
 
<body>
    <button id="toggleButton">Toggle Paragraph</button>
    <p>This is a paragraph to be toggled.</p>
</body>
 
</html>

In this example, each time the "Toggle Paragraph" button is clicked, the visibility of the paragraph element will be toggled with a fast speed.

Best Practices#

  • Use the toggle() method when you need a simple way to switch between hiding and showing an element. It reduces the amount of code and makes your code more readable.
  • Consider the user experience. If toggling an element will cause a significant change in the layout, make sure to add some visual cues to guide the user.

Fading Methods#

FadeIn#

The fadeIn() method is used to fade in hidden elements.

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

FadeOut#

The fadeOut() method fades out selected elements.

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

FadeToggle#

The fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

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

FadeTo#

The fadeTo() method allows you to fade an element to a specified opacity.

$(selector).fadeTo(speed, opacity, callback);
  • opacity: It is a value between 0 (fully transparent) and 1 (fully opaque).

Examples for each Fading Method#

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <title>Fading Examples</title>
    <script src="https://code.jquery.com/jquery - 3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#fadeInButton").click(function () {
                $("#fadeDiv").fadeIn("slow");
            });
            $("#fadeOutButton").click(function () {
                $("#fadeDiv").fadeOut("fast");
            });
            $("#fadeToggleButton").click(function () {
                $("#fadeDiv").fadeToggle();
            });
            $("#fadeToButton").click(function () {
                $("#fadeDiv").fadeTo("slow", 0.5);
            });
        });
    </script>
</head>
 
<body>
    <button id="fadeInButton">Fade In</button>
    <button id="fadeOutButton">Fade Out</button>
    <button id="fadeToggleButton">Fade Toggle</button>
    <button id="fadeToButton">Fade To 0.5</button>
    <div id="fadeDiv" style="background - color: red; width: 100px; height: 100px; display: none;"></div>
</body>
 
</html>

In this example, different buttons trigger different fading effects on the div element.

Conclusion#

jQuery's hide, show, toggle, and fading methods are powerful tools for adding interactivity to your web pages. They are easy to use and can enhance the user experience significantly. By understanding the syntax and following the best practices, you can create engaging and dynamic web applications.

References#