Hiding Elements Using Jquery Taking Up Space On Page

I am doing show and hide of server controls i.e Textboxe and DropDownList using jquery. Show and hide is working fine but the element which is hidden is taking up its blank space o

Solution 1:

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:

<divclass="col-md-8"><asp:TextBoxCssClass="txtstyle txtwidth newLine"runat="server"ID="txt_New_Val"TextMode="MultiLine" /><asp:DropDownListCssClass="newLine"runat="server"ID="ddl_relig" /><asp:TextBoxCssClass="txtstyle newLine"runat="server"ID="txt_tblname" /><asp:TextBoxCssClass="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')
    }
});