DEV Community

Stella Mwanahamuntu
Stella Mwanahamuntu

Posted on

10 4

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more