Introduction:

In this article we will explain how to hide a html elements using jQuery or What is hide() method in jQuery or why use hide() method in jQuery with example.

Description:

The jQuery hide() method is used to hide the selected elements. It simply sets the inline style display:none for the selected elements.

Let’s see simple jQuery hide() method with Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery hide method </title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnhide").click(function () {
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <input id="btnhide" type="button" value="Hide" />
    <p class="paragraph">
        Hello SQL Tutorials Point
    </p>
    <style>
        .paragraph {
            width: 400px;
            text-align: justify;
            height: 100px;
            background-color: #dad420;
            text-align: center;
            padding-top: 36px;
            font-size: 18px;
            color: #000;
        }
    </style>
</body>
</html>


You can also specify the duration as speed parameter for making the jQuery  hide effect animated over a specified period of time. Durations can be specified either using one of the predefined string 'slow' or 'fast', or in a number of milliseconds, for greater precision; higher values indicate slower animations.

Let’s see Example of  jQuery  hide() Method (with speed  parameter)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery </title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#fasthide").click(function () {
                $("p.fast").hide("fast");
            });
            $("#slowhide").click(function () {
                $("p.slow").hide("slow");
            });
        });
 
    </script>
</head>
<body>
    <table>
        <tr>
            <td><input id="slowhide" type="button" value="Slow hide" /></td>
            <td><input id="fasthide" type="button" value="Fast hide" /></td>
        </tr>
        <tr>
            <td>
                <p class="slow">
                    <b>Slow paragraph</b>
                </p>
            </td>
            <td>
                <p class="fast">
                    <b>fast Method</b>
                </p>
            </td>
        </tr>
    </table>
    <style>
        .fast {
            width: 200px;
            text-align: justify;
            border: 1px solid #000;
            margin-right: 15px;
            height: 200px;
            background-color: #dad420;
        }
 
        .slow {
            width: 200px;
            text-align: center;
            border: 1px solid #000;
            float: left;
            background-color: #dad420;
            margin-right: 15px;
            height: 200px;
        }
    </style>
</body>
</html>

You can also specify a callback function to be executed after the hide() method completes.

Let’s see Example of jQuery hide() Method (with callback function)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery hide Method </title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnhide").click(function () {
                $("p").hide("slow", function () {                    
                    alert("The hide effect is completed.");
                });
            });
        });
 
    </script>
</head>
<body>
     <input id="btnhide" type="button" value="hide" />   
    <p class="slow">
        <b>Call back paragraph</b>
    </p>
    <style>
        .slow {
            width: 200px;
            text-align: center;
            border: 1px solid #000;           
            background-color: #dad420;
            margin-right: 15px;
            height: 200px;
            margin-top:10px;
        }
    </style>
 
</body>
</html>

Thanks for reading this article.

 Let's check live example

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like