How to Hide Elements Without Having Them Take Space on the Page

How to hide elements without having them take space on the page?

Try setting display:none to hide and set display:block to show.

How to hide HTML elements without taking space

Apply display:none instead of visibility:hidden

With visibility:hidden the element will not be visible, but it'll be rendered and it'll take up corresponding space, with display:none the element will be there in DOM , but won't be rendered at all and won't take up space.

Update as per comments

$('button').click(function(){
 $('#para1').hide();
 $('#Billing').show();
})

How to hide an element without taking up space and still respond to events?

Simply setting opacity to 0 should work. The element won't show up, and it wont take space either. And its events will work.

When giving opacity, also specify the opacity counterparts of all browsers (-moz.., -webkit, filter: ..) etc.. to ensure cross-browser compatibility.

EDIT

Your style should look something like:

.mydiv {
  position: absolute;
  left: 10px; /* change as needed */
  top: 10px; /* change as needed */
  opacity: 0;
}

Working demo here: http://jsfiddle.net/t2BHg/6/

Hide div but keep the empty space

Use visibility css property for this

visibility:

The visibility property specifies whether the boxes generated by an
element are rendered.

$(".description").css('visibility', 'hidden');

Demo: Fiddle

Hiding elements using jquery taking up space on page

The problem seems to be the presence of line breaks (<br/>) between the controls. You can replace them by a class style where you set the display mode to block:

.newLine
{
    display: block;
}

The newLine class is applied to each element:

<div class="col-md-8">
    <asp:TextBox CssClass="txtstyle txtwidth newLine" runat="server" ID="txt_New_Val" TextMode="MultiLine" />
    <asp:DropDownList CssClass="newLine" runat="server" ID="ddl_relig" />
    <asp:TextBox CssClass="txtstyle newLine" runat="server" ID="txt_tblname" />
    <asp:TextBox CssClass="txtstyle newLine" runat="server" ID="txt_colname" />
</div>

The show and hide jQuery functions can then be used and will not leave an extra space between the controls:

$(document).on("click", ".edit", function () {
    ...
    if (col_name == 'relig_code') {
        $('#<%=ddl_relig.ClientID%>').show('slow');
        $('#<%=txt_New_Val.ClientID%>').hide('slow');
    }
    else {
        $('#<%=ddl_relig.ClientID%>').hide('slow');
        $('#<%=txt_New_Val.ClientID%>').show('slow')
    }
});

Dynamically hiding elements in a list without the hidden elements occupying empty space on the page

try style.display="none"

Using visibilty="hidden", the elements will still take up their calculated space on the page.

You may also consider using jQUery. It makes tasks like these incredibly simple.

jQuery hide element while preserving its space in page layout

Instead of hide(), use:

css('visibility','hidden')

hide() sets the display style to none, which completely removes the element from the document flow and causes it to not take up space.

visibility:hidden keeps the space as it is.

---

Related Topics