Hide or Show Elements in HTML using Display Property

HTML is the backbone of webpages, and it is used to structure websites and web apps.

In this tutorial, we will explore how to use the display property to hide or show components in HTML.

The style display attribute hides and shows the HTML DOM content by accessing the DOM element with JavaScript/jQuery.

To conceal an element, set its style display property to "none."

Adjust the style display attribute to "block" to illustrate an element.

Techniques to demonstrate how the style display property works:

1. Create some divs, give them an id or class, and then style them as follows:

2. Width and height define the width and height of the content, 50% creates a circle, border-radius 0% creates a square border, and 25% creates a rounded shape, and float positions the divs, margin-right separates them with a gap on the right.

3. Background-color specifies the colour of the div's background.

4. The document.getElementById will pick the div with the specified id.

5. When we click on the div, the style.display = "none" will cause it to disappear.

Application of style.display feature:

Output:

After clicking on it, the square shape will vanish:

Similarly, clicking on a circle shape causes it to vanish:

Similarly, clicking on a rounded shape causes it to vanish: