In this article we will show you the solution of JavaScript hide element, the style.display or the style.visibility methods in JavaScript can be used to hide elements.
An element can also be hidden in JavaScript by using the visibility attribute.
When employing visibility, the style.visibility differs from the style.display in the following ways: The tag is hidden, so it cannot be seen, but there is still space.
The tag is also hidden when using display: none, but no extra room has been reserved on the page. Now move to the concept of javascript hide element.
Step By Step Guide On JavaScript Hide Element :-
The hidden attribute in HTML can be used to cover up a specific element.
Elements are either hidden or visible depending on the value of the HTML hidden attribute, which defaults to true when set to true.
By utilising JavaScript/jQuery to access the DOM element, the style display attribute is utilised to hide and show the content of the HTML DOM.
By setting the style display attribute to "none," you can conceal an element.
Syntax:
document.getElementById("element").style.display = "none";
<!DOCTYPE html>
<html>
<head>
<title>
Javascript hide element
</title>
</head>
<body>
<h1>
Welcome to the Talkerscode
</h1>
<h2>
Example of the Javascript hide element..
</h2>
<div id = "div" style = "background-color: grey; font-size: 25px; color: white; border: 2px solid white;">
Welcome to the Talkerstech..
</div>
<p id = "p"> Welcome to the Talkersmoney.. </p>
<button onclick = "fun()" id = "btn">
Hide me!
</button>
<script>
function fun() {
document.getElementById("div").style.display = "none";
document.getElementById("p").style.display = "none";
}
</script>
</body>
</html>
- Our code begins with <!DOCTYPE html>. It is a statement that is shown above all other components on a web page.
- Every HTML document must contain the document type declaration in accordance with the HTML specification and standards in order to guarantee that the webpages are displayed as intended.
- The title of the web page is then provided using the HTML and HEAD tags with the aid of the TITLE element.
- The TITLE and HEAD tags are where we end up. It uses the BODY tag to begin the body of the code.
- The heading is written in the body by using H1 tag. The H2 tag is then used to create a new heading.
- Next, we utilise the paragraph element that is hidden when the supplied button is clicked, along with a div element that provides styling for the background colour, border colour, and font size.
- Next, we create a button with the function using onclick event value and its unique ID.
- We design the procedure that launches an action when a user hits a scripted button.
- After that, we utilise the style.display method, which has the value of none, to hide an element by its id.
- To see the result, click the "Hide me!" button. Then to finish, we add SCRIPT, BODY, and HTML tags to our code.
Conclusion :-
Thus, we have successfully acquired knowledge of the javascript hidden element.'
In addition, we discovered that a specific element can be hidden using the HTML hidden attribute.
The HTML hidden attribute's value, which defaults set true when set to true, determines whether an element is hidden or visible.
I hope this article on JavaScript hide element helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
