Updated June 7, 2023
Definition of jQuery Visibility
Jquery visibility is the effect of showing and hiding the elements as per user requirements. It allows us to make animated web application content. They show the hidden element and hide the display content mainly using a button in the web application.
It makes the illustrator effect work on the web page with setting time like delay. Jquery visibility has managed the size and space of the web page of a large amount of web content. It is a design effect that helps to design the required visible content.
Syntax:
- The jQuery visibility syntax is placed within the script tag.
- The jquery visibility with CSS syntax is below. This syntax works on the jquery 1.11.1 version.
$(" selector - element ").css("visibility", "visible");- The visibility of an element is determined by whether it is set to be displayed or hidden.
- It comes with the visible, hidden, etc method.
- The syntax is below. This syntax works on the design or highlights the visible content.
$("selector - element: visible");- The selector element is the Html tags and attributes. You can place the selector element with the class or ID of the tag.
- The visible work for displaying elements as per the user’s requirement.
How Does jQuery Visibility Works?
- The hidden content allows us to be visible on the web page and designs the visible content.
Step 1: There are two methods to add Jquery to the web page.
- The first method is jquery file downloads from the respective website, which is jQuery.com.
- You can place the file inside the head section of the HTML file.
<script src = "path/jquery-1.11.1.min.js">
</script>- The second method is the jquery CDN file below in the html file’s head section.
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>Step 2: The jquery elements and contents are placed in the body section of the web page.
- Firstly display the hidden style on the web page tag.
- The class or id is placed in the web page tag to select visibility content.
<body>
<div id="visibleContent" style = "visibility:hidden">the jquery visibility is the effect to show and hide the elements as per user requirement.
</div>
<button id="submit"> Submit </button>
</body>Step 3: The jquery visibility syntax used on the web page.
- The (“visibility”, “visible”); attributes are placed with the selector in the script tag.
<script>
$(function(){
$("#submit").click(function(){
$("#visibleContent").css("visibility", "visible");
});
});
</script>Step 4: The jquery visibility syntax is used for design and highlight the visible content.
- The $(“selector – element: visible”);
attribute place with the selector in the script tag.
<script>
$(function(){
$("#submit").click(function(){
$("# visibleContent:visible").css("background-color", "orange");
});
});
</script>- The combination of all parts of jquery visibility is below.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</script>
<script>
$(function(){
$("#submit").click(function(){
$("#visibleContent").css("visibility", "visible");
$("#visibleContent:visible").css("background-color", "yellow");
});
});
</script>
<style>
#optionselect{
height:40px;
visibility:hidden;
}
</style>
</head>
<body>
<div id="visibleContent" style="visibility:hidden"> the jquery visibility is the effect to show and hide the elements as per user requirement.
</div><br>
<button id="submit"> Submit </button><br>
</body>
</html>Examples of jQuery Visibility
Here are some examples:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<style>
.visibleContent{
height:40px;
visibility:hidden;
</style>
</head>
<body>
<h1> THE JQUERY VISIBILITY </h1>
<div class="visibleContent"> the jquery visibility is the effect to show and hide the elements as per user requirement.
Jquery visibility allows us to make animated web application content.
The jquery visibility is showing the hidden element and hides the display content mostly using a button in the web application.
The jquery visibility has managed the size and space of the web page of a large amount of web content.
Jquery visibility is a design effect that helps to design required visible contents.
</div><br>
<button id="submit" style="margin-top:8%;"> click here </button>
<script>
$(function(){
$("#submit").click(function(){
$(".visibleContent").css("visibility", "visible");
$(" h1:visible").css("background-color", "orange");
});
});
</script>
</body>
</html>Output
Before
After
Explanation: The visibleContent class displays hidden content with the visible element. When the submit button clicks, hidden content display and header background change in orange.
Example #2 – With hidden attribute
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<style>
.visibleContent{
height: 60px;
</style>
</head>
<body>
<h1> THE JQUERY VISIBILITY </h1>
<button id="submit" style="margin-top:1%;"> click here </button>
<div class="visibleContent"> the jquery visibility is the effect to show and hide the elements as per user requirement.Jquery visibility allows us to make animated web application content.
The jquery visibility is showing the hidden element and hides the display content mostly using a button in the web application.
The jquery visibility has managed the size and space of the web page of a large amount of web content.
Jquery visibility is a design effect that helps to design required visible contents.
</div><br>
<script>
$(function(){
$("#submit").click(function(){
$(".visibleContent").css("visibility", "hidden");
$(" h1:visible").css("background-color", "aqua");
});
});
</script>
</body>
</html>Output:
Before
After
Explanation: When submit button clicks, the visible contents are hidden. When submit button clicks, the visible content, which is the header changes the background color. The submit button simultaneously does the visibility and designing of the content.
Example #3 – With form display
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<style>
form{
height:40px;
visibility:hidden;
}
</style>
</head>
<body>
<h1> THE JQUERY VISIBILITY </h1>
<input type="submit" value="click here to Register" id="click" style="margin-top: 1%">
<div class="visibleContent">
<form>
<h3>Register form here</h3>
UserId:<input type="text"><br><br>
Phone :<input type="number"><br><br>
Address:<input type="text"><br><br>
<input type="submit" value="Register">
</form><br>
</div>
<script>
$(function(){
$("#click").click(function(){
$("form").css("visibility", "visible");
$(" h1:visible").css("background-color", "lightgreen");
});
});
</script>
</body>
</html>Output:
Before
After
Explanation: When the user clicks on the button, the system displays the registration form with the corresponding design. This example shows the convenience of space-saving and size-modifying elements in jquery.
Conclusion
- The jquery visibility is working on an animated web application.
- It makes web applications attractive, space-saving, and easy to use.
- It allows the web application content to display as per the user’s choice.
Recommended Articles
We hope that this EDUCBA information on “jQuery Visibility” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
