title: Hiding elements using jquery taking up space on page
body: <p>I am doing show and hide of server controls i.e Textboxe and DropDownList using jquery.</p>
  <p>Show and hide is working fine but the element which is hidden is taking up its blank space on the page .</p>
  <p>I've tried following tricks to hide the elements after using jquery hide() function:</p>
  <p><strong>css('visibility', 'hidden')</strong></p>
  <p><strong>css('display', 'none')</strong></p>
  <p>as defined in <a href="https://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page">this Question</a></p>
  <p>But still the same problem .</p>
  <p>Here is my code:</p>
  <pre><code> &lt;script&gt;
      $(document).on(&quot;click&quot;, &quot;.edit&quot;, function () {
      var col_name= $(this).data('col_name');
      var tbl_name = $(this).data('tbl_name');
      var tr = $(this).parent().parent();
      var tdRecords = $(tr).children();
      var CurrValue = $(tdRecords[0]).text();
      $('#&lt;%= txt_Curr_Val.ClientID %&gt;').val(CurrValue);
      $('#&lt;%=txt_colname.ClientID%&gt;').val(col_name);
      $('#&lt;%=txt_tblname.ClientID%&gt;').val(tbl_name);
          if (col_name == 'relig_code')
          {
              $('#&lt;%=ddl_relig.ClientID%&gt;').show('slow');
              //$('#&lt;%=txt_New_Val.ClientID%&gt;').hide('slow');
              $('#&lt;%=txt_New_Val.ClientID%&gt;').css('visibility', 'hidden')
          }
          else
          {
              //$('#&lt;%=ddl_relig.ClientID%&gt;').hide('slow');
              $('#&lt;%=ddl_relig.ClientID%&gt;').css('visibility', 'hidden')
               $('#&lt;%=txt_New_Val.ClientID%&gt;').show('slow')
          }
      });
    &lt;/script&gt;
  </code></pre>
  <p>Here is the HTML :</p>
  <pre><code>&lt;div class=&quot;modal-body&quot;&gt;
                        &lt;div class=&quot;row&quot;&gt;
                            &lt;div class=&quot;col-md-3&quot;&gt;
                                Current Value :
                            &lt;/div&gt;
                            &lt;div class=&quot;col-md-8&quot;&gt;
                                &lt;asp:TextBox CssClass=&quot;txtstyle txtwidth&quot;  runat=&quot;server&quot; ID=&quot;txt_Curr_Val&quot; TextMode=&quot;MultiLine&quot;&gt;&lt;/asp:TextBox&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                          &lt;div class=&quot;row&quot;&gt;
                            &lt;div class=&quot;col-md-3&quot;&gt;
                                New Value :
                            &lt;/div&gt;
                            &lt;div class=&quot;col-md-8&quot;&gt;
                                &lt;asp:TextBox CssClass=&quot;txtstyle txtwidth&quot; runat=&quot;server&quot; ID=&quot;txt_New_Val&quot; TextMode=&quot;MultiLine&quot;&gt;&lt;/asp:TextBox&gt;&lt;br /&gt;
                                &lt;asp:DropDownList  runat=&quot;server&quot; ID=&quot;ddl_relig&quot;&gt;&lt;/asp:DropDownList&gt;&lt;br /&gt;
                                &lt;asp:TextBox CssClass=&quot;txtstyle&quot; runat=&quot;server&quot; ID=&quot;txt_tblname&quot; &gt;&lt;/asp:TextBox&gt;&lt;br /&gt;
                                &lt;asp:TextBox CssClass=&quot;txtstyle&quot; runat=&quot;server&quot; ID=&quot;txt_colname&quot;&gt;&lt;/asp:TextBox&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                         
                      &lt;/div&gt;
  </code></pre>
  <p>After trying <strong>display : none</strong></p>
  <p>its look like :</p>
  <p><a href="https://i.stack.imgur.com/0Nz4M.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Nz4M.jpg" alt="enter image description here" /></a></p>
  <p>How can I resolve this ?</p>
  <p>Thanks for your Help</p>