jQuery: How to check id is shown or hidden

April 14, 2011 | In: javascript, jquery, web development

In many cases we do not want make two buttons to show or hide a same div area. for example expand and collspan method. jQuery provides a simple technique to check div id is already shown or hidden.

Create a div are on which you want to do operation:

<div><a href="javascript:void(0)" onclick="__showHideFullDetail('showhidearea')">Click on me</a></div>
<div id="showhidearea">Content will be here!!!</div>

Then make a function in the javascript in your head tag.

function __showHideFullDetail(divID) {
	if ( jQuery('#' + divID).is(':hidden') ) { 
		jQuery('#' + divID).show('slow');
	} else {
		jQuery('#' +divID).hide('slow');
	}
}

In this function we checked that provided div id is already shown or hidden. If it status is hidden then it will show it otherwise hide it.