How to use Display None in JavaScript

In JavaScript, you can use the display property to control the visibility of an element on a page. If you want to hide an element, you can set its display property to none.

Here is an example of how you might do this:

document.getElementById('my-element').style.display = 'none';
Code language: JavaScript (javascript)

In this code, we are using the getElementById method to select the element with the ID my-element, and then we are setting its display property to none to hide it.

Keep in mind that this will only hide the element from the page; it will still exist in the page’s HTML code. If you want to completely remove the element from the page, you will need to use a different approach.

Toggle Display of Element

To toggle between display: none and display: block in JavaScript, you can use a conditional statement to check the current value of the display property and then set it to the opposite value. Here is an example of how you might do this:

var element = document.getElementById('my-element');

if (element.style.display === 'none') {
  element.style.display = 'block';
} else {
  element.style.display = 'none';
}
Code language: JavaScript (javascript)

In this code, we are using the getElementById method to select the element with the ID my-element, and then we are checking its display property using an if statement. If the display property is set to none, we set it to block to show the element. If the display property is not set to none, we set it to none to hide the element.

You can also use a ternary operator to make the code more concise:

var element = document.getElementById('my-element');

element.style.display = (element.style.display === 'none') ? 'block' : 'none';
Code language: JavaScript (javascript)

Real-World Example

In this example we have wrapped the above code in a re-usable function:

function toggleDisplay(selector) {
  var element = document.querySelector(selector);

  element.style.display = (element.style.display === 'none') ? 'block' : 'none';
}

// Example

var menu = document.querySelector('.menu');
var menuButton = document.querySelector('.menu-button');

menuButton.addEventListener('click', function() {
  toggleDisplay('.menu');
});
Code language: JavaScript (javascript)

This code listens for click events on a button and then toggles between showing and hiding the menu when the button is clicked.