How to check element or p tag is visible or not using JQuery

Many times we need to check any element in an HTML page is visible or not. In today’s tutorial, I am using the JQuery library to perform the desired task.

How to check element or p tag is visible or not using JQuery

What is JQuery?

JQuery is a JavaScript library used to simplify HTML code.

We will use the predefined function of the JQuery library to speed up the process of writing code.

You can not use directly JQuery code on your HTML page, for using JQuery code you need to add the JQuery library to our HTML page.

How to use JQuery Library on an HTML page?

The process to use JQuery Library on an HTML page is extremely simple. There are two ways for using the library to HTML pages.

  1. Use CDN of JQuery to HTML page.
  2. Download JQuery and use it.

The simplest way to use the JQuery library on an HTML page is, to get the CDN of JQuery and directly call your HTML page.

Where to get the CDN of JQuery?

The meaning of CDN is a content delivery network, JQuery library will be hosted on another server we will call the library from another server to our HTML page

Click here to copy the link from another server, or you can copy the below code and just paste it into your head tag. An example is mentioned below.

Click here to get cdn of Jquery

In the above example, we have written HTML code that we have called the JQuery library from CDN. It is simple right?

Now I am moving to the example, of how you can check div tag is hidden or not using JQuery.

How to check div tag is hidden or not using JQuery?

To check if the div is hidden or not, we have written HTML code where the JQuery library is called in the head tag and we have written div tag we will check whether mentioned div tag is hidden or not.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" >
		
	</script>
</head>

As you can see in the head tag JQuery library is called, In the HTML body we have written the div tag and below that, we have written JQuery code to check whether the div is hidden or not.

in the below script I am checking whether div is hidden or not by using a function of JQuery.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" >
		
	</script>
</head>
<body>
<div>
	Div checking 
</div>
<input type="button"  onclick="CheckDivByTag()" value="Click me to check div is visible or not.">
</body>
</html>

In the above code, we have written plane HTML code, in the head tag we have called the JQuery library using the CDN method mentioned above.

In the body tag, we have written a div tag with ‘Div checking’ content.

Now we will write JQuery to check ‘div’ is hidden or not, for performing this task we will use JQuery’s ‘is’ function.

<script>		
	function CheckDivByTag()
	{
		if($('div').is(':visible'))
		{
				alert('I am visible div.');
		}
		else{
			alert('I am not visible div.');
		}
	}
</script>

Write the above code in the HTML body tag, this code will check ‘div’ element is hidden or not. Whenever anyone will click on the button ‘Click me to check whether div is visible or not.’ the above function will be executed. this function uses the ‘is’ function of the JQuery library. After clicking on the button this function will show an alert box with the message, whether the div is visible or not. If div is visible then this function will show ‘I am visible div.’ or if div is not visible then this function will show ‘I am not visible div.’ alert message.

Complete page code of how to check ‘div’ is hidden or visible below.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer">
		
	</script>
</head>
<body>

<div>
	Div checking 
</div>
<input type="button"  onclick="CheckDivByTag()" value="Click me to check div is visible or not.">
<script>
	
	function CheckDivByTag()
	{
		if($('div').is(':visible'))
		{
				alert('I am visible div.');
		}
		else{
			alert('I am not visible div.');
		}
	}
</script>

</body>
</html>

How to check ‘p’ tag is hidden or not using JQuery?

Below we have created an HTML page, int that page we have called the JQuery library to check ‘p’ tag is visible or hidden. For checking whether the ‘p’ element is hidden or not we have written the code of the ‘p’ tag. for checking purposes we are writing code in JavaScript. Again we are using the same function from the JQuery library which is ‘is’ function and we are applying this function to ‘p’ element to check ‘p’ element or tag is hidden or visible.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer">
		
	</script>
</head>
<body>
<p>
Check P is hidden or not
	</p>
<input type="button"  onclick="CheckPisvisble()" value="Click me to check p is visible or not.">
<script>
function CheckPisvisble()
	{
		if($('p').is(':visible'))
		{
				alert('I am visible p.');
		}
		else{
			alert('I am not visible p.');
		}
	}
</script>
</body>
</html>

after clicking on the button ‘Click me to check p is visible or not.’ function ‘CheckPisvisble’ will be executed which will show a message in the alert. For visible ‘p’ message will be ‘I am visible p.’ and for not visible ‘p’ message will be ‘I am not visible p.’.

How to check ‘div’ is hidden or visible, by their ‘id’?

In the below example we will check that ‘div’ is hidden or visible by its ‘id’ property. for checking first we will write the code of the ‘div’ element or tag, then we will add the id to it.

in the below example ‘div’ is created with having id is ‘divId’, after that we will write JQuery function to perform p is hidden or not checking functionality. in the below code, we have written the function ‘CheckDivIsVisibleById’ which will check div is hidden or not by its id. for specifying id as a JQuery selector ‘#’ is used, you can see the use of ‘#’ in the below example.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer">
		
	</script>
</head>
<body>
<div id="divId">
		Check div is hidden or not by id, This div's id is divId
	</div>
	<input type="button"  onclick="CheckDivIsVisibleById()" value="Click me to check div is visible or not.">
<script>
	function CheckDivIsVisibleById()
	{
		if($('#divId').is(':visible'))
		{
				alert('I am visible div.');
		}
		else{
			alert('I am not visible div.');
		}
	}
</script>
</body>
</html>

After clicking on the ‘Click me to check whether div is visible or not.’ button, if the div having ‘divId’ id is visible then the ‘I am visible div.’ alert message will be shown else ‘I am not visible div.’ alert message will be shown.

How to check ‘div’ element is hidden or not by their ‘name’?

In the below example, we will see how to check whether div is visible or not by their name using JQuery.

In the below example we have written div code having ‘divName’ as a name. after that we have written JQuery code of checking wheater ‘div’ having ‘divName’ as the name is hidden or not by writing function ‘CheckDivIsVisibleByName’ if you notice then we had used ‘#’ in our previous example to specify an id. but if you want to select elements by their name ‘#’ can’t be used. for selecting elements by thier name we will use ‘[name=divName]‘. you can check in below code.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer">
		
	</script>
</head>
<body>
<div name="divName">
		Check div is displaying or not by jquery, this div's name is divName 
	</div>
	<input type="button"  onclick="CheckDivIsVisibleByName()" value="Click me to check div is visible or not.">
<script>
	function CheckDivIsVisibleByName()
	{
		if($('[name=divName]').is(':visible'))
		{
				alert('I am visible div.');
		}
		else{
			alert('I am not visible div.');
		}
	}</script>

</body>
</html>

if you check in the above example then we have written ‘[name=divName]’ as a selector. by specifying mentioned code we are asking JQuery to select an element having ‘divName’ as a name. above code will be executed in your browser. after clicking on ‘Click me to check div is visible or not.’ button ‘CheckDivIsVisibleByName‘ function will be executed. which will show alert message. if the visibility alert message will be ‘I am visible div.’ and for nonvisibility, it will show ‘I am not visible div.’ alert message.

For example, having visibility off.

In the below example we have written code of div and we have set visibility off, by specifying style ‘display: none;’, by specifying style as display off we are specifying visibility off of the div.

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer">
		
	</script>
</head>
<body>
<script>
function CheckNotVisibleDivById()
	{
		if($('#NotVisibleDiv').is(':visible'))
		{
				alert('I am visible div.');
		}
		else{
			alert('I am not visible div.');
		}
	}
</script>

</body>
</html>

The above code will show the alert message ‘am not visible div.’ as we have set visibility off of the div.

Thank you for the reading article. Feel free to ask questions we will try to solve your questions by making new posts.

2 thoughts on “How to check element or p tag is visible or not using JQuery”

  1. Good way of describing, and pleasant piece of writing to obtain data on the topic of my presentation topic, which i am going
    to deliver in academy.

Leave a Comment

Your email address will not be published. Required fields are marked *