jQuery :visible Selector Examples

If you wish to check whether an element in a web page is visible or hidden, you can easily achieve it using the jQuery visible selector. In this article, I am going to share easy examples that show how to use the visible selector in making a div visible / hidden, check if element is visible or not, set visible, toggle visibility, etc. Read on to find out more.

How to use the jQuery visible Selector

In order to see the usage of the :visible selector, assume that we have few elements in a web page such as a div, an image, etc. Let’s see how the visibility works and can be manipulated in real time. Check out the examples below.

Common HTML source code for all the following examples

<style type="text/css">
#my_div1  {
	background-color: #3C6;
	border: 1px solid #090;
}

.custom_class {
	background-color: #FC9;
	border: 1px solid #F90;
}	
</style>

	<div id="my_div1">This is my existing Div 1.</div>

	<p>
	<input type="submit" name="sbt_check_div_visibility" id="sbt_check_div_visibility" value="Check if DIV 1 is Visible or Not">    
    </p>

    <div id="my_div2">This is my existing Div 2.</div>

	<p>
	<input type="submit" name="sbt_toggle_div_visibility" id="sbt_toggle_div_visibility" value="Toggle DIV 2 Visibility">    
    </p>

    <img src="images/money.jpg" class="my_image" />   

	<p>
	<input type="submit" name="sbt_set_image_visibility" id="sbt_set_image_visibility" value="Set Image Visibility">    </p>

    <ul>
    <li id="list_item_1">List Item 1</li>
    <li id="list_item_2">List Item 2</li>    
    <li id="list_item_3" style="visibility:hidden;">List Item 3</li>
    <li id="list_item_4">List Item 4</li>    
    <li id="list_item_5" style="visibility:hidden;">List Item 5</li>
    <li id="list_item_6">List Item 6</li>            
    </ul>

	<p>
    <input type="submit" name="sbt_visible_li_count" id="sbt_visible_li_count" value="Alert Visible LIST ITEM ID">
    </p>   

    <p id="para1" style="visibility: visible;">This is a Paragraph 1.</p>    

	<p>
	<input type="submit" name="sbt_chk_p_visibility" id="sbt_chk_p_visibility" value="Check PARAGRAPH visibility using visibility attribute">    
    </p>

	<div id="h6_container">
    This is H6 Div Container.
    	<h6 style="visibility: hidden;">This is a hidden H6 Heading</h6>
    </div>

	<p>
	<input type="submit" name="sbt_create_if_not_visible" id="sbt_create_if_not_visible" value="Create New H6 if current H6 is invisible">    
	</p>

<script type="text/javascript">

$(document).ready(function(){

//Put all your jQuery code here

});

</script>

Example 1: Check if div is visible or not visible (hidden)

$('#sbt_check_div_visibility').on("click", function(e){

	if( $("#my_div1:visible") )
	{
		alert('DIV 1 is Visible');		
	}
	else
	{
		alert('DIV 1 is Hidden');				
	}

	e.preventDefault();

});

Example 2: Toggle div visibility i.e Make a visible div hidden and vice versa

$('#sbt_toggle_div_visibility').on("click", function(e){			

	$("#my_div2").toggle();

	e.preventDefault();		

});

Example 3: Manually set visibility to an element, such as an image, div, etc.

$('#sbt_set_image_visibility').on("click", function(e){			

	$(".my_image").css("visibility", "hidden");

	e.preventDefault();

});

Example 4: Select visible elements only for list items of unordered  i.e. if element is visible, then alert its (the visible list item) ID

$('#sbt_visible_li_count').on("click", function(e){

	$('ul li').each(function(index) {

		if( $(this).css("visibility") !== 'hidden' )
		{
	    	alert( $(this).attr("id") );
		}

	});

	e.preventDefault();

});

Example 5: Check element visibility using the .is() method

$('#sbt_chk_p_visibility').on("click", function(e){			

	if( $("#para1").is(':visible') )
	{
		alert('Paragraph is VISIBLE');
	}
	else
	{
		alert('Paragraph is HIDDEN');		
	}

	e.preventDefault();		

});

Example 6: If element is not visible then create a new element

$('#sbt_create_if_not_visible').on("click", function(e){			

	if( $("h6:hidden") )
	{
		$('#h6_container').append('<h6>This is NEw H6 HEADING</h6>');
	}

	e.preventDefault();

});

Simple, isn’t it?

Do you know of any other ways to use the jQuery visible selector? Feel free to suggest by commenting below.