jquery
  1. jquery-hide-show
PreviousNext

jQuery Hide/Show

jQuery Hide/Show is a popular method for adding interactivity to your web page. It allows you to dynamically hide or show HTML elements based on user actions or other factors.

Syntax

To use Hide/Show in jQuery, you need an HTML element and a trigger (often a button or link). The basic syntax is as follows:

$(selector).hide();
$(selector).show();

The selector is the HTML element you want to hide or show. You can also use additional parameters in the function to specify the speed or animation effect of the change.

Use

Hide/Show is commonly used for creating collapsible menus, pop-ups, and other interactive features that allow users to control the content they see on a web page. It can also be used to improve the user experience by reducing clutter and helping users focus on the most important information.

Example

Here is an example of using Hide/Show in jQuery:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide/Show Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggle").click(function(){
                $("#content").toggle();
            });
        });
    </script>
</head>
<body>
    <h1>Click the button to toggle the content</h1>
    <button id="toggle">Toggle Content</button>
    <div id="content">
        <p>This is some content that can be hidden or shown.</p>
    </div>
</body>
</html>
Try Playground

In this example, we use jQuery to create a button that toggles the display of a block of text. The HTML element with the ID content is hidden by default, but when the user clicks the button with the ID toggle, the content is shown or hidden depending on its current state.

Summary

jQuery Hide/Show is a powerful tool for adding interactivity to your web pages. It allows you to create dynamic and responsive content that can be hidden or shown based on user actions, device type, or other factors. With jQuery, you can create a wide range of customized and interactive web experiences that are sure to engage and delight your audience.

Document ReadyFade
Published on: