CODEWITHSUNDEEP
csshideshow
Filippo oretti
Filippo oretti

Reputation: 49817

CSS - opposite of display:none

I'm trying setting up two simple css classes to toggle elements :

.hide{
  display:none;
}

.show{
  display:inherit;
}

It seems to work but sometimes display:inherit; return troubles so which is the exact opposite of display:none; ?

Upvotes: 9

Views: 28336

Answers (4)

Saqib Javed
Saqib Javed

Reputation: 120

If you use Javascript to do that:

document.getElementById(id).style.display = "";

And

document.getElementById(id).style.display = "none";

Can toggle the display for you.

Upvotes: 4

Artem Petrosian
Artem Petrosian

Reputation: 2954

It depends on which element you want to show, for block elements:

.show{
  display: block;
}

Upvotes: 0

andi
andi

Reputation: 6522

If you are just toggling elements, you don't need two classes; you just need one class ("hide") that you add and remove for each element. When you hide the element, you add class "hide" to it, and when you show the element again, you remove class "hide".

However, if you really need two classes, I've had success with something like this:

.show{display:"";}

The blank value tells the browser to ignore that property, and it goes back to its default value.

Upvotes: 1

Dryden Long
Dryden Long

Reputation: 10182

This all depends on the element you are specifying. For example <div> and <p> elements are display:block; by default, whereas <span> is display:inline; by default.

The accepted answer here provides a list of the defaults for each element based on what browser is being used.

EDIT

It appears that display: initial; will work in most browsers, although not IE. A fallback line of CSS would probably be best practice:

.show {
    display: block;
    display: initial;
}

Upvotes: 15

Related Questions