title: Avoid hidden element occupying space/not possible to make visibility:true which is initially made display:none in css style
body: <pre><code>&lt;style type=&quot;text/css&quot;&gt;
  #second{
   display:none;
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>On mouse event I want to pass id's of div which is not related to current element from where I am calling the function.</strong></p>
  <pre><code>&lt;div id=&quot;first&quot;&gt;
       ....
       ....
  &lt;/div&gt;
  &lt;div id=&quot;second&quot;&gt;
       ....
       ....
  &lt;/div&gt;
  
  &lt;input type=&quot;image&quot; src=&quot;...&quot; id=&quot;notrelated&quot;
   onClick=&quot;f('first','second')&quot;
   /&gt;
  </code></pre>
  <p><strong>JavaScript</strong></p>
  <pre><code>&lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&gt;
  function f(first,second){
  document.getElementById(first).style.display='none';
  document.getElementById(second).style.visibility='visible';
  }
  &lt;/script&gt;
  </code></pre>
  <p>The above function thus helps in hiding and make the div visible which is based on mouse event on image.</p>
  <p>I followed these above steps,after making visibility 'visible' it wont show because I've made div second display none and I tried making the following changes which results in second div occupying space which I don't prefer:</p>
  <pre><code>&lt;style type=&quot;text/css&quot;&gt;
  #second{
  visibility:hidden;
  }
  &lt;/style&gt;
  </code></pre>