CSS - opposite of display:none

Question

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; ?

Answer 1

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.

Answer 2

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.