how to remove the space occupied by hidden divs

Question

I have set of divs as listed below,

<div id="invoice"></div>
<div id="claim"></div>
<div id="draft"></div>

and i have a reponse which may have type as invoice, claim or draft. If I get "draft" in the response then I will display only claim div and rest two will be hidden, but the problem is the above two divs are hidden and occupying space also (i.e., leaving a gap from the top and then displaying the draft div).

I am using CSS as below,

 $("#draft").css('flex','flex-wrap'); // for showing the content in a straight line.
 $("#draft").css('display','block');

and for hiding it,

 $("#draft").css('display','none');

Similarly for all the id. I am new to this, so please correct me if I am wrong somewhere. Thanks in advance.

Using display:none, there is no space being taken up - if you use visibility:hidden, there is. In this case it is the flex that is breaking it: http://stackoverflow.com/questions/27144702/how-to-reset-display-property-for-flex-item — mplungjan, Jan 09 '17 at 13:00

score 1 · Accepted Answer · answered Jan 09 '17 at 14:21

if i understand your question below answer might be helpful.

div {
  width: 40px;
  height: 80px;
}
div.anyOne:empty {
  display: none
}

Div which has some data will be visible
<br/>
<br/>
<div id="invoice" class="anyOne">Invoice</div>
<div id="claim" class="anyOne"></div>
<div id="draft" class="anyOne"></div>

score 0 · Answer 2 · answered Jan 09 '17 at 15:11

Use display: none; to hide an element completely and leaving its space.

Use visiblity: hidden to hide an element while leaving the space where it would have been.

div{
  background-color:red;
  width: 150px;
  height: 50px;
  border: solid 1px black;
}

#draft {
    display: none;
}

<div id="invoice">invoice</div>
<div id="claim">claim</div>
<div id="draft">draft</div>
<div id="another">another</div>

how to remove the space occupied by hidden divs

2 Answers2