Show and Hide Element using CSS with/without JavaScript

mwanahamuntu_

Stella Mwanahamuntu

Posted on February 9, 2020

Show and Hide Element using CSS with/without JavaScript

You can control layout by showing and hiding them declaratively in the HTML markup or modifying the objects' CSS properties, sometimes using Javascript.

The Display Property

The display property specifies if and how an element is displayed.
The display property accepts three possible values;

  • inline: browser displays the item and elements only takes up as much space as necessary. Examples of inline elements are the span, a and img tags.
  • block: stretches out to and as far as it can. Examples of the block elements are li, div, h1 - h6, p, form, header, footer and section tags.
  • none: browser hides the item.
  • inherit: inherits property from parent element.

The Visibilty Property

The Visibility specifies whether or not an element should be visible.
The visibility property accepts four possible values;

  • visible: visible to show elements
  • hidden: hides elements
  • collapse: collapses elements where applicable, such as a table row
  • inherit: inherits the values of the visibility property from the parent

I hope this codepen does some justice

💖 💪 🙅 🚩
mwanahamuntu_
Stella Mwanahamuntu

Posted on February 9, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related