Hide CSS Element Without Changing Display Property

Question

I would like to keep a element with initial display preserved but that is hidden (at first). I know there are other methods of hiding an element with CSS, however I also don't want the element to take up space at first. As an example

.target_element {
    display: table;
}

// event happens later...
$('.loader').hide()
$('.target_element').show()

Is there a way to accomplish this? I don't want to set display to 'none' and then later come back and set it to 'table' in some JS when I want to show it.

Out of sheer curiosity, I must ask: Why display: none is undesirable? — Frish, Apr 26 '18 at 21:30
@APAD1 when I set display as none, and later set it to table, I found that the element and it's children (labels and inputs) weren't rendering properly. — nickm_md, Apr 26 '18 at 21:55
Must have been some other issue, because that wouldn't happen changing from `none` to `table`. — APAD1, Apr 27 '18 at 14:30

score 4 · Accepted Answer · answered Apr 26 '18 at 21:34

There are several ways. Either you can make the element position: absolute or position: fixed so it doesn't take up any room and then use any of visibility: hidden, opacity: 0, etc. One thing you'd need to look out for is that if they don't have display: none, they can still receive click events, so use pointer-events: none to stop that.

My preferred combination:

#myElement {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

And then when you want to show it:

$("#myElement").css({
  'position': 'static',
  'opacity': 1,
  'pointer-events': 'all'
})

The bonus here is that you can transition the opacity, as opposed to visibility or display.

Thank you! I ended up using a wrapper as suggested in another answer and this. — nickm_md, Apr 26 '18 at 21:50

score 1 · Answer 2 · answered Apr 26 '18 at 21:36

1

Use a wrapper for hiding and showing your table.

HTML

<div class="target_wrapper">
  <div class="target_element"></div>
</div>

CSS

.target_element {
    display: table;
}


.target_wrapper {
    display: none;
}

JS

$('.target_wrapper').show()

Explanation

.show() sets display: block;. To avoid chanding the property of your table, use a wrapper, that does not depend on that property. It will be simply shown as soon as you trigger $('.target_wrapper').show() and shows up your table correctly.

answered Apr 26 '18 at 21:36

Michael W. Czechowski

3,366
2
23
50

This worked best for me. setting the display to none for the wrapper element was an elegant solution to needing to ignore the display value of the actual element – Eliezer Miron May 17 '23 at 20:24
This worked best for me. setting the display to none for the wrapper element was an elegant solution to needing to ignore the display value of the actual element – Eliezer Miron May 17 '23 at 20:24

score 1 · Answer 3 · answered Apr 26 '18 at 21:37

display:none; is definitely the way to go, unless I'm misunderstanding your question. If your issue is that .show() switches it to display:block; then just use jQuery to add a class to the element instead.

setTimeout(function() {
  $('table').addClass('visible');
}, 2000);

table {
  display:none;
}
  table.visible {
    display:table;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
</table>

score 0 · Answer 4 · answered Apr 26 '18 at 21:33

How long do you want to hide your element for?

There are various ways to do this, you can set a cookie in your browser or you can use a Javascript function such as setTimeout to display an element after a fixed period of time.

setTimeout( function() {
   $("#your_element").show();
   }, 5000); // Time in milliseconds

score 0 · Answer 5 · answered Apr 26 '18 at 21:41

0

// styles.css
.e.hidden {
  position: 'static',
  opacity: 0,
  pointer-events: 'all'
}

// main.js
setTimeout(() => {
  $('.e').removeClass('hidden')
}, 5000)

// index.html
<div class="e hidden">
  ...
</div>

How about this?

answered Apr 26 '18 at 21:41

Maya Vera

1

score -1 · Answer 6 · answered Apr 26 '18 at 21:36

It sounds like the simplest solution would be to use visibility hidden

.target_element {
    visibility: hidden;
}

Based on comments, it seems you don't want to affect your overall layout so this will make the item "invisible" but it will still take up place.

Hide CSS Element Without Changing Display Property

6 Answers6