How to Hide and Show Elements in JavaScript

Nuelson Penuel Tuesday, August 1, 2023 Javascript


Table Of Contents
Elements Hiding in JavaScript
Simple Example on Elements Hiding Using JavaScript
Benefits of Hiding Elements on Webpage
Conclusion

Elements Hiding in JavaScript

Element hiding in JavaScript refers to the process of making an HTML element, such as a div, image, or paragraph, invisible or hidden from the user's view on a web page.

When an element is hidden, it does not occupy any space in the document flow, and it cannot be interacted with by the user. However, it still exists within the Document Object Model (DOM) and can be accessed and manipulated programmatically using JavaScript.

There are various methods to hide elements in JavaScript, as mentioned in the previous explanation. These methods involve changing the CSS properties of elements, such as `display`, `visibility`, or adding/removing classes that have CSS rules to hide the element.

Simple Example on Elements Hiding Using JavaScript

<html>  
<head>  
<title>  
style.display  
</title>  
</head>  
<body>  
<span>  
Example of the JavaScript's style.display and style.visibility property  
</span>  
  
<div id = "div1" style="background:red">  
This is div1 element.  
</div>  
 This is div2 element. </div>  
<button onclick = "hideFun()" id = "btn1">  
Hide Divs
</button>  
<button onclick = "showFun()" id = "btn2">  
Show Divs
</button>  
  
<script>  
function hideFun() {  
//Hiding elements using display
document.getElementById("div1").style.display = "none";  

//Hiding elements using visibility 
document.getElementById("div2").style.visibility = "hidden";  
}  

function showFun() {  
//Showing elements using display
document.getElementById("div1").style.display = "block";  

//Showing elements using visibility 
document.getElementById("div2").style.visibility = "visible";  
}  
</script>  
</body>  
  
</html>  


In the example give above, we declared two functions; one to hide the Divs and the other to show the Divs. We demonstrated the use of style.display and style.visibility to achieve the same result.

Benefits of Hiding Elements on Webpage

Element hiding can be useful in various scenarios, such as:

1. Improving User Experience: By hiding certain elements initially and showing them later when needed, you can create a more interactive and dynamic user experience on your website.

2. Responding to User Actions: You can conditionally hide or show elements based on user interactions, such as clicking a button, submitting a form, or scrolling to a particular section.

3. Managing Layout and Design: Hiding elements can help manage the layout and design of a page. For example, you can hide certain elements on mobile devices to optimize screen real estate or hide unnecessary content in responsive designs.

4. Security and Access Control: Hiding certain sensitive information or features based on user roles or permissions can enhance the security of web applications.

Conclusion

Element hiding in JavaScript provides flexibility and control over the visibility and interaction of elements on a web page, enhancing the user experience and allowing developers to create more dynamic and responsive interfaces.