CSS - opposite of display:none

css hide show
itsme picture itsme · Apr 28, 2014 · Viewed 19.5k times · Source

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

Dryden Long picture Dryden Long · Apr 28, 2014

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

Related questions

Hide Show content-list with only CSS, no javascript used

I've been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I've managed to make this action: <!DOCTYPE html> <head> <style> #cont {display: …

Read More
jQuery hide and show toggle div with plus and minus icon

I have the code working for the show and hide the div. How would I add two different icons as a sprite image for when the show and hide are active? For example: + icon for show me, then a - …

Read More
How to Show One <div> if Javascript Enabled and a Different <div> if It's Not?

I'm using some Javascript to display a "photo fade rotator" in a <div>. If JS is not enabled, however, I've got an animated gif I want to display instead. I actually have it working with this code: <…

Read More