How to use jQuery hide/show Methods

The jQuery show method is used to display the hidden elements in a web page. For example:

$(“div”).show(speed,callback);

The $.hide method is used to hide the visible elements:

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

Where,

Parameter Description
selector A selector can be a text paragraph, a menu contained in a div, HTML tables, specific rows of the table, header, footer elements, etc. in a web page, and so on.
speed The speed can be defined in milliseconds or “slow” and “fast”.
callback  The callback function is optional in both methods.

See the following demos to understand how you can use these methods.

The examples include a simple div, a menu, and an HTML table with different parameters of hide and show methods.

An example of show/hide in a div element

In this example, a simple div is created with a certain height and width. Above the div, two buttons are given to hide and display the div.

As you click the “hide div” button, the jQuery hide method will execute in the click event of that button. See the animated demo below:

The demo of $.show and $hide methods in jQuery.

The code behind the click event of the “hide div” button is:

$(".hidediv").click(function () {

$(".divdemo").hide("slow");

});

As you click the “Show div” button, it will display the div with duration of 2000 Milliseconds. Following code executed as you click on that button:

$(".showdiv").click(function () {

$(".divdemo").show(2000);

});

Complete code:

<!DOCTYPE html>
<head>
<title>jQuery Testing</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
   $(document).ready(function() {
     $(".hidediv").click(function () {
     $(".divdemo").hide("slow");
    });

     $(".showdiv").click(function () {
     $(".divdemo").show(2000);
    });

   });

</script>
<style>
.divdemo{
width:300px;
height: 200px;
background-color:#0780BA;
color:#fff;
padding:100px;
font-size:25px;
}
</style>
</head>

<body>
<p><button class="hidediv">Hide div</button>
<button class="showdiv">Show div</button>
</p>    
   <div class="divdemo">
     Show / Hide demo
   </div>
</body>
</html>

Note: No callback function is used in this example.

An example of show/hide menu with callback function

The following is an example of showing/hiding a menu, which is basically a combination of <div>, <ul><li>, and <a> tags. The menu is contained inside a div.

Again two buttons are given to show and hide the menu:

jQuery show hide menu

The code:

<!DOCTYPE html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
   $(document).ready(function() {
    //To hide the menu
     $(".hidediv").click(function () {
     $(".men_ex").hide("fast",function(){
      alert("Menu is hidden!");
    });
   });
    //To show the menu
     $(".showdiv").click(function () {
     $(".men_ex").show(2000,function(){
      alert("Menu is displayed!");
    });
   });    
});
</script>




<style>
.men_ex{
    border-radius:5px;
}
.men_ex ul {
    margin: 0; 
    padding: 0;
    width:185px;
    list-style-type: none;
    
}
.men_ex ul li a {
    text-decoration: none;
    color: #fff; 
    padding: 10.5px 11px;
    background-color: #3E5F74;
    display:block;
    border-bottom:solid 1px #000;
}
.men_ex ul li a:visited {
    color: white;
}
.men_ex ul li a:hover, .men_ex ul li .current {
    color: #000;
    background-color: #B1C7D6;
}

.show_hide{
   position:fixed;
   margin: 30px 30px;
}
</style>
</head>

<body>
  
<h1>jQuery hide/show demo</h1>
<div class="men_ex">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<p><button class="hidediv">Hide menu</button>
<button class="showdiv">Show menu</button>
</p>  

</body>
</html>

The hiding of the menu is kept “fast” and as the menu is hidden, the callback function will be executed and trigger an alert. This code is used for hiding the menu:

$(".hidediv").click(function () {

$(".men_ex").hide("fast",function(){

alert("Menu is hidden!");

});

});

Similarly, to display the menu, the duration is given two seconds. After the menu is displayed, it will also trigger an alert which is placed inside the callback function.

$(".showdiv").click(function () {

$(".men_ex").show(2000,function(){

alert("Menu is displayed!");

});

});
In certain scenarios, this callback function can be really useful to perform some actions as a certain task is completes which is associated with hiding or showing elements.

Show/hide specific menu items rather than complete menu demo

As such, the menu in the above example is a combination of div, ul, and <a> tags. Rather than hiding or showing the complete menu, you may hide or display only specific items.

Full code with jQuery:

<!DOCTYPE html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
   $(document).ready(function() {
    //To hide the menu
     $(".hidediv").click(function () {
     $("#service").hide("fast",function(){
      alert("Services is disappeared!");
    });
   });
    //To show the menu
     $(".showdiv").click(function () {
     $("#service").show(2000,function(){
      alert("Services is back!");
    });
   });    
});
</script>




<style>
.men_ex{
    border-radius:5px;
}
.men_ex ul {
    margin: 0; 
    padding: 0;
    width:185px;
    list-style-type: none;
    
}
.men_ex ul li a {
    text-decoration: none;
    color: #fff; 
    padding: 10.5px 11px;
    background-color: #3E5F74;
    display:block;
    border-bottom:solid 1px #000;
}
.men_ex ul li a:visited {
    color: white;
}
.men_ex ul li a:hover, .men_ex ul li .current {
    color: #000;
    background-color: #B1C7D6;
}

.show_hide{
   position:fixed;
   margin: 30px 30px;
}
</style>
</head>

<body>
  
<h1>jQuery hide/show demo</h1>
<div class="men_ex">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li id="service"><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<p><button class="hidediv">Hide Services item</button>
<button class="showdiv">Show Services item</button>
</p>  

</body>
</html>

Copy/paste the code into your editor and execute.

In that case, I used the ID of the “Services” menu item in the click events of the jQuery hide and show buttons rather div class.

A demo to show/hide table

In the following example, I will use jQuery show and hide methods with a table. See the demo first which is followed by a little description:

Code:

<!DOCTYPE html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
   $(document).ready(function() {
    //To hide the table
     $(".hidetable").click(function () {
     $(".table_bg").hide("fast")
   });
    //To show the table
     $(".showtable").click(function () {
     $(".table_bg").show(2000);
   });    
   //To hide ODD rows
     $(".hideoddrows").click(function () {
     $(".table_bg  tr:odd").hide("slow")
   });
    //To show ODD rows
     $(".showoddrows").click(function () {
     $(".table_bg  tr:odd").show(1000)
   });   
});
</script>



<style>
.table_bg {
  width:40%;
  font-family:verdana;
  font-size:15px;  
  color:#fff;
  padding: 10px;
  text-align:center;
}
.table_bg th{
    background: #0780BA;

    color: #fff;
    line-height:35px;
  }
.table_bg td{
    background: #99DBFB;    
    padding:10px;

    color: #000;
  }  
</style>
</head>

<body>
  
<h1>jQuery hide/show demo</h1>
<button class="hidetable">Hide Table</button>
<button class="showtable">Show Table</button>
<button class="hideoddrows">Hide Odd rows</button>
<button class="showoddrows">Show Odd rows</button>
</p>
<table class="table_bg">
    <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Age</th>
     <th>Salary</th>
    </tr>
    <tr>
     <td>1</td>
     <td>Jim</td>
     <td>35</td>
     <td>$5000.00</td>
    </tr>
    <tr>
     <td>2</td>
     <td>Anna</td>
     <td>24</td>
     <td>$3500.00</td>
    </tr>
    <tr>
     <td>3</td>
     <td>Adams</td>
     <td>31</td>
     <td>$4000.00</td>
    </tr>
    <tr>
     <td>4</td>
     <td>Adams</td>
     <td>31</td>
     <td>$4000.00</td>
    </tr>
    <tr>
     <td>5</td>
     <td>Adams</td>
     <td>31</td>
     <td>$4000.00</td>
    </tr>        
</table>

</body>
</html>

 

jQuery show hide table

You can see four buttons on the demo image above. As you click the first button, “Hide table”, the following code will be executed to hide the table:

$(".hidetable").click(function () {

$(".table_bg").hide("fast")

});

The table is referred to by a class selector in the hide jQuery method with fast duration.

As you click the “Show button”, the following code will display the table with two-seconds duration:

$(".showtable").click(function () {

$(".table_bg").show(2000);

});

The next two buttons are to hide and show the ODD rows in the table. As you click “Hide odd rows”, the odd rows will hide by using this code:

$(".hideoddrows").click(function () {

$(".table_bg tr:odd").hide("slow")

});

In the click event of the button, tr:odd selector is used with the table class to hide the rows.

You may simply use “tr:odd” as well, however, this will hide all table’s odd rows on the web page.

To show the odd rows:

$(".showoddrows").click(function () {

$(".table_bg tr:odd").show(1000)

});

Again tr:odd selector with table class is used in the show jQuery method.