Hide html elements javascript

How to hide HTML element with JavaScript?

In this tutorial, we will learn how to hide HTML element with JavaScript.

Hiding an HTML element can be performed in different ways in JavaScript. In this tutorial, we will see the three most popular ways of doing it −

1. Using the hidden property
2. Using the style.display property
3. Using the style.visibility property

Generally, we use the hidden attribute to hide a particular element. We can toggle between hiding and showing the element by setting the hidden attribute value to true or false, respectively.

In the other two ways, we use the style object of the element. We have two properties in the style object to hide the HTML element, one is the display, and another one is the visibility.

In JavaScript, we can use both of these properties to hide the HTML elements, but the main difference between these two is when we use style.visibility property, then the specific tag is not visible, but the space of the tag is still allocated. Whereas in style.display property, not only is the tag hidden but also there is no space allocated to that element.

Using the hidden property

In JavaScript, the hidden property of an element is used to hide an element. We set the hidden properties value to true to hide the element.

Syntax

Following is the syntax to use hidden property −

document.getElementById('element').hidden = true

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method, we are accessing the element and changing its hidden property to true to hide the element.

Example

In the below example, we have used the hidden property to hide a div element using JavaScript.

html> body> div id="dip"> Click the below buttons to hide or show this text. /div>br> button onclick="hide()"> Hide Element /button> button onclick="show()"> Show Element /button> script> function hide()  document.getElementById('dip').hidden = true > function show()  document.getElementById('dip').hidden = false > /script> /body> /html> 
 

Using the style.display property

In JavaScript, style.display property is also used to hide the HTML element. It can have values like ‘block,’ ‘inline,’ ‘inline-block,’ etc., but the value used to hide an element is ‘none.’ Using JavaScript, we set the style.display property value to ‘none’ to hide html element.

Syntax

Following is the syntax to hide HTML elements using style.display property in JavaScript.

document.getElementById('element').style.display = 'none'

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method, we are accessing the element and changing its style.display property to ‘none’ to hide the element.

Example

In the below example, we have used the style.display property to hide a div element using JavaScript.

html> style> #myDIV  width: 630px; height: 300px; background-color: #F3F3F3; > /style> body> p> Click the "Hide Element" button to hide the div element. /p> button onclick="hide()"> Hide Element /button> div id="myDIV"> Hello World! This is DIV element /div> script> function hide()  document.getElementById('myDIV').style.display = 'none' > /script> /body> /html> 
 

Using the style.visibility property

In JavaScript, style.visibility property is also used to hide the HTML element. It can have values like ‘visible,’ ‘collapse,’ ‘hidden’, ‘initial’ etc., but the value used to hide an element is ‘hidden’. Using JavaScript, we set the style.visibility property value to ‘hidden’ to hide html element.

Syntax

Following is the syntax to hide HTML elements using style.visibility property in JavaScript −

document.getElementById('element').style.visibility = 'hidden'

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method, we are accessing the element and changing its style.visibility property to ‘hidden’ to hide the element.

Example

In the below example, we have used the style.visibility property to hide element using JavaScript.

html> style> #dip  width: 630px; height: 300px; background-color: #F3F3F3; > /style> body> p> Click the "Hide Element" button to hide the div element. /p> button onclick="hide()"> Hide Element /button> button onclick="show()"> Show Element /button> div id="dip"> Hello World! This is DIV element /div> script> function hide()  document.getElementById('dip').style.visibility = 'hidden'; > function show()  document.getElementById('dip').style.visibility = 'visible'; > /script> /body> /html> 
 

In the above output, users can see the element is hidden using style.visibility property, but the element still occupies its space in the browser.

In this tutorial, we learned three ways to hide an element using JavaScript. The first approach was to use the hidden property of an element. The next was to set style.display property to ‘hidden’. The third method was to set style.visibility property to ‘hidden’.

Источник

How to hide and show DOM elements using JavaScript

There are multiple ways to show or hide DOM elements in vanilla JavaScript. In this article, we shall look at two ways to hide or show DOM elements using JavaScript.

The style display property is used to set and get the element’s display type in JavaScript. Majority of the HTML elements have the inline or block display type. The content of an inline element floats to its left and right sides. Block HTML elements are different because they * fill* the entire line and do not show content on their sides. To hide an element, set the display property to none :

document.querySelector('.btn').style.display = 'none' 

document.querySelector('.btn').style.display = 'block' 

Another way to show or hide DOM elements in JavaScript is using the style visibility property. It is similar to the above display property. However, if you set display: none , it hides the entire element from the DOM. The visibility:hidden hides the element contents, and the HTML element stays in its original position and size. To hide an element, set the visibility property to hidden :

document.querySelector('.btn').style.visibility = 'hidden' 

document.querySelector('.btn').style.visibility = 'visible' 

The style visibility property only hides the element but doesn’t remove the space occupied by the element. If you also want to remove the space, set display: none using the display property.

jQuery provides hide() , show() , and toggle() utility methods that use inline styles to update the display property of the element. Let us use the style property to create the above jQuery methods in vanilla JavaScript:

// hide an element const hide = elem =>  elem.style.display = 'none' > // show an element const show = elem =>  elem.style.display = 'block' > // toggle the element visibility const toggle = elem =>  // if the element is visible, hide it if (window.getComputedStyle(elem).display !== 'none')  hide(elem) return > // show the element show(elem) > 

// hide element hide(document.querySelector('.btn')) // show element show(document.querySelector('.btn')) // toggle visibility toggle(document.querySelector('.btn')) 

Notice the use of the getComputedStyle() method, which we just learned the other day, to check if an element is already visible. We used this method because the style property only deals with inline styles specified using the element’s style attribute. But the HTML element could be hidden through an embedded element or an external stylesheet. The getComputedStyle() method returns the actual CSS styles used to render an HTML element, regardless of how those styles were defined. Another thing to notice is the getComputedStyle(elem).display !== ‘none’ statement. We are not checking whether the display type is block because block is not the only way to show an element. You could use flex , inline-block , grid , table , etc., for the display property to show an element. However, to hide an element, there is only one value, display: none . If you prefer to use a CSS class to hide and show DOM elements instead of inline styles, read this guide. ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник

How to Show or Hide an Element on Website using JavaScript

Throughout web development, users need to hide or show some elements. These elements can be a button, some animation, or a navigation bar etc. Most of the time the user wants a button or a navigation bar to be visible for the desktop viewpoint but not for the mobile viewpoint.

With JavaScript, users can easily hide or show an element on the webpage, depending on the behavior of the user. In this article we’ll see how JavaScript is used for this purpose.

Hiding and Displaying elements in JavaScript

Using JavaScript, we can hide or show an element on the webpage using:

Let’s understand each of them separately with examples and then compare how the differ from each other:

How to use style.display in JavaScript: The display property represents an element that should be displayed on your web page.. Using this user can hide the entire element, and the page is built as the previous element wasn’t there at all.

Syntax:

Here in commas, a value should be defined for whether to display the content or not. Here’s an example:

To Hide element: style.display = “none”:

As the user clicks on the button, the function is called to hide the element. This is done by assigning none value to style.display.

Now look at the output, how the button occupied the space of the image. This is how display works, it hides the element entirely and rebuilds the page as if the element wasn’t there in the first place.

To Show an element: style.display = “” or “block”:

document.getElementById ( «div2″ ) . style .display = » ;
}
< / script >
< / body >

Now similarly, in order to show the element the button moved and provided space to the element when display was changed from style.display =”none” to style.display = “”.

Through these ways, the element will be displayed or completely hidden and not just its visibility. The page will be rebuilt according to these behaviours.

How to use style.visibility in JavaScript : The style visibility works in the similar way, but the difference is that only the visibility of the element is hidden from the screen reader. This means that the element is not removed from the page flow, hence leaving space for it on the page.

Syntax:

Here in commas, a value of “hidden” or “” no value should be defined for whether to display the content or not. To better understand this here’s an example:

Hide content of paragraph < / button >

This is another paragraph. < / p >

function myFunction() document.getElementById(«div»).style.visibility = «hidden»;
>
< / script >

Now, here when the button was clicked ato hide the visibility, it only hid it for the viewer’s eye.

In this, the space on the web page was not occupied by the element. This shows how style.display and style.visibility differ.

Conclusion

Everyone wants to hide or show some particular elements on their web page. In this how to guide, we learned ways to change the visibility of elements on the web page using JavaScript. There are two specific ways, but they differ from each other slightly. Using style.display the content gets hidden and its space is occupied by the other content. Whereas, using style.visibility, the content only is hidden for the reader, but it’s still there as its space can not be occupied by other elements. This is extremely useful for web developers, as developers want some content to be hidden and some to be displayed according to the viewpoint.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

Источник