9

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

j08691
  • 204,283
  • 31
  • 260
  • 272
itsme
  • 48,972
  • 96
  • 224
  • 345
  • 3
    that is **Display : Block;** – Jeyarathnem Jeyachanthuru Apr 28 '14 at 16:07
  • 1
    All the other possible values of `display` will be opposite to `display:none` such as `display:inline-block`, `display:table`, ... – King King Apr 28 '14 at 16:09
  • 2
    @JeyTheva why **block** if i don't want to specify it? i just need to hide and show without setting any rule :P – itsme Apr 28 '14 at 16:09
  • 3
    you can't make any assumptions about what display type was set before. it could've been `block`, it could've been `inline-block`, it could've been `table-cell` or whatever. There's one "none", but there's many "opposites" it could have been. – Marc B Apr 28 '14 at 16:09
  • I guess that CSS **won't remember** the state of `display` before you set it to `none`. So there won't be any CSS solution for this. – King King Apr 28 '14 at 16:11
  • @KingKing i dunno i actually tryed both **inherit** and **initial** they both works but i dunno differences between them and if is this a good practice – itsme Apr 28 '14 at 16:14
  • @MarcB display:initial ? dunno ... – itsme Apr 28 '14 at 16:14
  • @sbaaaang `initial` is normally the default display of the element, such as `div` has `display:block` by default, `span` has `display:inline` by default while `inherit` is the display of the parent. In fact this kind of question is very confusing. In CSS **we never encounter any issue related to this problem**. – King King Apr 28 '14 at 16:17

4 Answers4

15

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;
}
Community
  • 1
  • 1
Dryden Long
  • 10,072
  • 2
  • 35
  • 47
  • thanks +1 actually best answer i'll wait little bit more and in case accept your ;) – itsme Apr 28 '14 at 16:59
  • `display:initial` effectively means `display:inline`, so 'display:block' can't be a fallback for it and the code after the 'Edit' is kind of misleading. There is also `display: revert` value (from CSS Cascade level 4 spec) which effectively reverts the `display` value to the browser default for the element (`block` for `div`, `table-row` for `tr`, etc.), but its browser support is even worse than for `display:initial`. – Ilya Streltsyn Apr 23 '17 at 14:22
4

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.

Rob
  • 26,989
  • 16
  • 82
  • 98
Saqib Javed
  • 120
  • 9
1

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.

andi
  • 6,442
  • 1
  • 18
  • 43
0

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

.show{
  display: block;
}
Artem Petrosian
  • 2,964
  • 1
  • 22
  • 30