jQuery Show Hide

jQuery is one of the most popularly used framework because of it’s simplicity over coding practice, learning and ect. Let us have an example to create hide show effect using jQuery. We can do the same using simple Javascript also. But, the reason for why we are going to use jQuery is as follows.

  • Simplify the code by using in-built functions and there by reducing burden from doing all the thing by our own. For example, to hide an element from the browser using Javascript, we have to identify their name or id as,
    document.some-form-name.element-name.display = 'none';
    //or
    document.getElementById(element-id).display = 'none';
    
  • jQuery provides faster response while working with complex programming like AJAX.
  • This framework provides guaranteed same effect in all browsers which is main problem in Javascript.
  • By having Javascript library, it covers bundle of functions like event handling, AJAX, dynamic effect on HTML elements and etc., that are needed while developing web applications.

jquery_show_hide

Example: jQuery Show Hide

In this example, we have two links named expand and collapse to show and hide the list of programme one by one. The links are appeared like button by applying class selectors of CSS. So, the links can be created as,

<a href="#" class="expand">Expand All</a>
<a href="#" class="collapse">Collapse All</a>

On clicking these link, the event is trigger by using jQuery’s click function with respect to the name of the particular class selector. For example, if we click the collapse link, the following block of jQuery code will be executed.

$('.collapse').click(function(){
$(".collapse").hide();
$("li").last().hide("slow", function fnCollapse() {
$(this).prev("li").hide("slow", fnCollapse);
if(!$(this).prev("li").length)
	$(".expand").show();
});
});

In the above block, while clicking the collapse link, it will be hidden using jQuery’s hide() method. And then, we are calling fnCollapse() method recursively to hide each item from bottom to top of the list. Once, there is no items found to collapse, then the expand link will be shown using show() method.

Similarly we can repeat the same for expand, to show each collapsed item from top to bottom of the list. And the code is as shown below.

$(".expand").hide();
$('.expand').click(function(){
$(".expand").hide();
$("li").first().show('slow',function fnExpand() {
$(this).next("li").show("slow", fnExpand);
if(!$(this).next("li").length)
$(".collapse").show();
});
}); 

We should put the above two event handlers inside the block shown below. This block will perform like window.onload() function of plain Javascript.

$(document).ready(function(){
... 
});

We can group the above jQuery code snippet into a single Javascript file and save it as jquery.showhide.js to include it into the HTML page. Before that, we need to download latest version of jQuery library file from jQuery official website. Or we can use it from internet by specifying it’s url in the src attribute of the <script> tag. So, entire HTML content will look like as follows.

<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.showhide.js"></script>
</head>
<body>
<table width="500px" cellpadding="10" cellspacing="10" border="0" class="tblShowHide">
<tr>
<td valign="top">
<div>
<span>Programmes</span>
<a href="#" class="expand">Expand All</a>
<a href="#" class="collapse">Collapse All</a>
</div> 
<ul>
<li>News</li>
<li>Knowledge</li>
<li>Religion</li>
<li>Entertainment</li>
<li>Movies</li>
<li>Music</li>
<li>Comedy</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

Demo: jQuery Show Hide

Click Here, to see the demo for jquery hide and show effect.

Download jQuery Show Hide Source Code

This jQuery code tutorial was published on May 24, 2013.

↑ Back to Top