How to use jQuery hide / show methods with div, table, lists demos

The hide and show methods of jQuery

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, a selector can be a text paragraph, a menu contained in a div, HTML tables, and specific rows of the table, header, or footer elements etc in a web page and so on.

The speed can be defined in milliseconds or “slow” and “fast”. While the callback function is optional in both methods.

See the following demos to making it clearer how you can use these methods. The examples include a simple div, a menu, and 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 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 demo online:

See online demo and code

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

 

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:

 

Note: No callback function is used in this example.

An example of show/hide menu with callback function

The following is an example to show/hide 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:

See online demo and code

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

 

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.

 

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

Show/hide specific menu items rather complete menu demo

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

See this demo:

See online demo and code

In that case, I used ID of the “Services” menu item in the click events of the jQuery hide and show buttons rather div class. You can see the complete code in the demo page.

A demo to show/hide table

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

See online demo and code

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

 

The table is referred 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 at two-second duration:

 

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:

 

In the click event of button, tr:odd selector is used with table class to hide the rows. You may simply use “tr:odd” as well, however, this will hide all tables odd rows in the web page.

To show the odd rows:

 

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