The visibility attribute in JavaScript Style allows developers to control the display of an element, either making it visible or concealed. The presence of this element on the webpage is determined by its visibility attribute. In addition to visibility, there exists another JavaScript attribute known as hidden, which can effectively conceal an element without eliminating the physical space it occupies. HTML elements can utilize either inline or block display types. As a result, while block display occupies the entire line or block, inline-block elements will align either to the left or right. Consequently, when the visibility attribute is set to hidden, elements will continue to be positioned correctly, just as illustrated in this example.
JavaScript Style visibility
- As previously discussed, an element's visibility property can be set to show or hide it from the page. Therefore, the visibility hidden value will be displayed correctly, meaning that even though the element is invisible, its original size and position will remain.
- One can set visibility in styling using values like visible, hidden, collapse, initial, and inherit. Rather than using visibility, one can perform both functions, such as hiding and removing an element from the document, by setting the display property to none. We can save the area that elements will take up on the screen by using visibility: hidden, but it will appear to be empty. With the visibility property, animation is made possible, something that the display: none property does not allow.
- The display property in JavaScript style is in charge of setting and returning the value associated with the selected element's display type.
- Interpolation is one more feature of visibility. This term refers to the visibility values that are considered interpolable between visibility values, such as visible and no visible. Therefore, in this case, either the start or end values must be required to be visible in order for interpolation to occur.
- The user will be able to see those visible values that will be used with the timing function, which is situated between 0 and 1 on the map.
- Screen reading technology will no longer be able to publish related elements or any of their descendant elements due to the visibility value of hidden elements being removed from the accessibility tree.
Syntax
There are several unique values linked to visibility syntax; let us analyze each one individually as outlined below:
object.style.visibility
By employing this syntax, we can configure an element's visibility attribute, enabling users to display or conceal elements according to their preferences.
element.style.visbility ="hidden";
element.style.visibility="visible";
The visibility can be set using the values: visible, hidden, collapse, initial, and inherit.
visible: To render content on the display, the property value is designated as visible. By default, the property value is configured to visible.
The information will be concealed based on this property value.
collapse: The property designated exclusively for application on the table element is referred to as collapse. Its main function is to remove a particular row or column without altering the overall structure of the table. By utilizing the collapse property, the spaces occupied by the table’s rows and columns can be freed up for use by other layout components.
This property value is employed to establish the default value.
inherit: This property value enables an element to take on the contents of its parent element.
Examples of JavaScript Style Visibility Implementations
Example No. 1
By clicking the link, content can be hidden:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#visibility_example {
width:340px;
margin:10px;
text-align: center;
}
#box1{
height:40px; background: pink;
color:black;
padding-top: 20px;
visibility: visible;
}
#box2 {
height:40px;
background:lightgreen;
color:black;
padding-top: 20px;
}
#box3 {
height:40px;
background:lightblue;
color:black;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="visibility_example">
<h4>Example to show and hide div in JavaScript </h4>
<div id="link">
<a id="visibility" href="#" onclick="toggleVisibility();">Click this box to see how it works</a>
</div>
<br>
<div id="box1">Box 1 (Click on the link above to see show and hide div using JavaScript) </div>
<div id="box2">Box 2 <br>
</div>
<div id="box3">Box 3</div>
</div>
<script type="text/javascript">
function toggleVisibility()
{
var block1 = document.getElementById('box1');
if(block1.style.visibility == "hidden")
{
block1.style.visibility = "visible";
}
else
{
block1.style.visibility = "hidden";
}
}
</script>
</body>
</html>
Output
Before clicking on the link:
After clicking on the link:
Example No. 2
Content hiding upon button click:
<!DOCTYPE html>
<html>
<body>
<h4>Hiding content while we click the button</h4>
<p id="hide_example">Hi all!! Welcome back..!!
<br> This article is about how to hide and show div in JavaScript<br><br>
The visibility property in JavaScript Style lets users show or hide an element. <br><br>
This element's visibility on the webpage is defined by its visibility property. </p>
<button type="button" onclick="myFunction()">Click this button to hide the above content. </button>
<script>
function myFunction() {
document.getElementById("hide_example").style.visibility = "hidden";
}
</script>
</body>
</html>
Output
Before clicking on the button:
After clicking on the button:
hide div element by default and show it on click
This will be utilized for both initial and property values, including states such as visible, hidden, collapse, and inheritance.
Initially, the div needs to be concealed, after which it should become visible on the display when a user interacts with the button. This functionality is beneficial for creating various shapes.
This issue can be addressed through two distinct approaches, which will be elaborated upon in the subsequent sections:
- Utilizing the .show function
- The toggle function is employed
- The required display property for the div should be set to display: none.
- To make the div element visible, use the.show method.
Method 1: Employing the .show function
The strategy previously mentioned is applied in this example.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#div {
display: none;
background: pink;
height: 200px;
width: 200px;
color: black;
}
</style>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</script>
</head>
<body>
<h1 style="color:red;">
Welcome Guyss!!
</h1>
<p id="main"></p>
<div id="div">
This is Div box.
</div>
<br>
<button onClick="hide()">
click here
</button>
<br>
<p id="example" style="color: green;"></p>
<script>
$('#main').text(
`Click the below button to toggle
the hidden box.`);
function show(divId) {
$("#" + divId).show();
}
function hide() {
show('div');
$('#example').text("Now DIV box will be visible");
}
</script>
</body>
</html>
Output
Before clicking the button:
When we click on the "click here" button:
Method 2: Employing the toggle function
- The div that needs to be displayed should have its display: none property set.
- To display the Div, use the.toggle method. Nonetheless, the div can be hidden once more using this technique.
Example:
<!DOCTYPE HTML>
<html>
<head>
<style>
.one {
color: orange;
}
.two {
color: red;
}
</style>
</head>
<body>
<div id="demo" class="one">Welcome back everyone!</div>
<footer>
<h3>Let's discuss JavaScript topics <a href="https://logic-practice.com/">Your link</a></h3>
</footer>
<script>
function three() {
this.classList.toggle('one');
this.classList.toggle('two');
}
document.querySelector('#demo').addEventListener('click', three);
</script>
</body>
</html>
Output:
Before clicking on the orange colour line:
Upon clicking the orange line, it will change its color to red:
Upon clicking on "Your link," you will notice a wide array of courses available in the Example tutorials:
Conclusion
From the details provided, we can deduce that style visibility determines which elements are displayed or hidden on the interface. When utilized alongside JavaScript, it enables the development of intricate web page designs and an essential navigation menu.