DEV Community

loading...

Show and Hide Element using CSS with/without JavaScript

Stella Mwanahamuntu
Hey, glad you stumbled on my dev.to account, this place place is great right?! Anyways, I make apps, websites and everything else pretty and usable. Javascript is pretty cool so I am into that too.
・1 min read

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

Discussion (0)

Forem Open with the Forem app