CSS - opposite the display: no

Question

I am trying to set up two simple CSS classes to switch elements:

.hide{ display:none; } .show{ display:inherit; } 

It seems to work, but sometimes it displays: inherit; return problems, which is the exact opposite of display: none;

Answer 1

It all depends on the item you specify. For example, <div> and <p> default display:block; , and <span> is display:inline; default.

The accepted answer here contains a list of default values ​​for each item based on which browser is used.

EDIT

It will appear that display: initial; will work in most browsers, although not IE. Extra CSS line is likely to be best practice:

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

Answer 2

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

 .show{ display: block; } 

Answer 3

If you just switch elements, you do not need two classes; you just need one class (“hide”) that you add and remove for each element. When you hide an element, you add the "hide" class to it, and when you show the element again, you delete the "hide" class.

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

 .show{display:"";} 

A blank value tells the browser to ignore this property and returns to its default value.

Answer 4

If you are using Javascript for this:

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

and

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

May switch the display for you.