Controlling visibility with JavaScript
In JavaScript web development scripts, web developers can control and manage the default webpage preview visibility of web element objects by applying built-in CSS properties to web elements, such as modifying the display, visibility, and opacity properties. These CSS properties allow web developers to dynamically hide or display web element objects based on a web user’s action, event, or condition.
Here’s a detailed description of how to manage and control the visibility of web element objects in JavaScript by applying some basic class and method techniques.
Using the display property in JavaScript webpages.
The display property of a web element object in a JavaScript webpage control and manages the layout of that web element. To hide a web element in the current webpage, web developers can set the display property of that web element to none. To change the display of a JavaScript web element, web developers can reset it to its original default value. For example, by manually setting the property to block for block-level elements, or to inline for inline elements.
Example of toggling visibility using display in a JavaScript webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Toggle Switch Visibility with Display Properties in JavaScript</title>
<style>
.content {
background-color: lightpink;
padding: 30px;
margin: 30px;
border: 3px solid indigo;
}
</style>
</head>
<body>
<button id=”toggleBtn” class=”w3-button w3-pink”>Switch Content Display Visibility</button>
<div id=”content” class=”content” >
<p>Here we can define text content, that may be display property turn on and turn off. </p>
</div>
<script>
// here we get the button and the content div block to display
var toggleBtn = document.getElementById(‘toggleBtn’);
var content = document.getElementById(‘content’);
//here we set initial webpage object display visibility
var isVisible = true;
// Here we toggle display visibility when the button is clicked by the user
toggleBtn.onclick = function() {
if (isVisible) {
content.style.display = ‘none’; // Here this JavaScript property hides the web content
} else {
content.style.display = ‘block’; // Here this JavaScript property shows the web content
}
isVisible = !isVisible; // Here this JavaScript property switches the visibility state
}
</script>
</body>
</html>
Explanation of toggling visibility using display in a JavaScript webpage.
- display: none – In this example, when JavaScript webpage content is hidden, it is removed from the current document layout and does not occupy any space or display on the current webpage.
- display: block – When content in the current JavaScript webpage is displayed using a toggle switch. So, it occupies or displays the space it occupies, rendering as a block-level web element.
Using the visibility property in JavaScript webpages.
In a JavaScript webpage, the preview visibility property of a webpage element object works similarly to the display properties. These properties differ depending on their use. This JavaScript property maintains the webpage layout even when the web element’s screen space is hidden. When the visibility:hidden property is defined on an existing JavaScript webpage element, it prevents the JavaScript element object from being displayed. However, it still occupies space in the current JavaScript webpage. To re-display it in a JavaScript webpage, web developers set the visibility:visibility property to the JavaScript webpage.
Example of a visibility toggle switch using Visibility in a JavaScript webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Toggle Switch Visibility with Visibility Properties in JavaScript</title>
<style>
.content {
background-color: lightcyan;
padding: 30px;
margin: 30px;
border: 4px solid teal;
}
</style>
</head>
<body>
<button id=”toggleBtn” class=”w3-button w3-green”>Switch Content Visibility</button>
<div id=”content” class=”content”>
<p>Here we can define text content, that may be visibility properties turn on and turn off. </p>
</div>
<script>
// here we get the button and the content div block to visibility
var toggleBtn = document.getElementById(‘toggleBtn’);
var content = document.getElementById(‘content’);
//here we set initial webpage object visibility
var isVisible = true;
// here we toggle switch visibility, when the button is clicked by web user
toggleBtn.onclick = function() {
if (isVisible) {
content.style.visibility = ‘hidden’; // Here this JavaScript properties hide the web content
} else {
content.style.visibility = ‘visible’; // Here this JavaScript properties show the web content
}
isVisible = !isVisible; // Here this JavaScript properties switch the visibility state
}
</script>
</body>
</html>
Explanation of a visibility toggle switch using Visibility in a JavaScript webpage.
- visibility:hidden – In this example, the web element is hidden in the JavaScript webpage, but it still occupies the web layout space in the webpage.
- visibility:visibility – In this JavaScript property, the web element becomes visible as usual, and occupies the same amount of space in the current webpage.
Using the Opacity Property in a JavaScript Webpage.
The opacity property in a JavaScript webpage control and manages the transparency of the web element object. In this example, a web element with opacity: 0 on a webpage is completely transparent (invisible) or not displayed. Similarly, a web element with opacity: 1 displays the object completely opaque (visible). Web developers can use intermediate values to make the web element slightly transparent.
Example of toggling visibility using the opacity property.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Toggle Switch Visibility with Visibility Opacity Properties in JavaScript</title>
<style>
.content {
background-color: lightgray;
padding: 40px;
margin: 40px;
border: 4px solid blue;
transition: opacity 0.7s ease; /* here we set Smooth css opacity transition attributes */
}
</style>
</head>
<body>
<button id=”toggleBtn” class=”w3-button w3-yellow”>Switch Content Visibility</button>
<div id=”content” class=”content”>
<p>Here This content will fade in and out, that may be visible opacity properties. </p>
</div>
<script>
// here we get the button and the content div block to visibility
var toggleBtn = document.getElementById(‘toggleBtn’);
var content = document.getElementById(‘content’);
// here we Set the initial opacity css properties
var isVisible = true;
// Here we toggle visibility when the button is clicked by a web user
toggleBtn.onclick = function() {
if (isVisible) {
content.style.opacity = ‘0’; // Here this JavaScript property makes the content invisible
} else {
content.style.opacity = ‘1’; // Here this JavaScript property makes the content visible to display with opacity
}
isVisible = !isVisible; // Here this JavaScript property switches the visibility state
}
</script>
</body>
</html>
Explanation of toggling visibility using the opacity property.
- opacity: 0 – In this example, when a JavaScript webpage element is defined as completely transparent (invisible), it still occupies space in the webpage layout.
- opacity: 1 – This opacity property displays a JavaScript webpage element when it becomes completely opaque (visible).
- This JavaScript transition effect (transition: opacity 0.7s ease) modifies the default opacity to display a smooth fading effect in the webpage.
