How to change the position of the Horizontal line dynamically?

I am making asp.net website. In that there is a link button (named Landline number).Below that there are three textboxes. And after that there is one horizontal line.

Now at a first time only link button and horizontal will be visible, and textboxes which is bellowed to link button will not be visible. Now if user will click on the link button then textboxes which is bellowed to link button will be visible. Then horizontal line which is at the first time bellowed to the link button should be adjust to its location and开发者_JS百科 should go after textboxes.

And if user clicks to link button again then textboxes should be visible false. And horizontal line should be displayed its original position that is bellowed to the link button. Of course I am able to do with visibility of textboxes but I can not understand how to change the position of the horizontal line dynamically?

Try this:

<a href="javascript:void()" onclick="toggleTextBoxes()">Toggle Text</a><br/>
<div id="divBox" style="display:none">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="text" name="text3"/>
</div>
<hr/>
<script>
    function toggleTextBoxes()
    {
        var divBox = document.getElementById("divBox");
        divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none";
    }
</script>

So you aspx Page would be like:

<a href="javascript:void()" onclick="toggleTextBoxes()">Toggle Text</a><br/>
<div id="divBox" style="display:none">
    <asp:Textbox runat="server" id="text1"/>
    <asp:Textbox runat="server" id="text2"/>
    <asp:Textbox runat="server" id="text3"/>
</div>
<hr/>
<script>
    function toggleTextBoxes()
    {
        var divBox = document.getElementById("divBox");
        divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none";
    }
</script>

Assuming you're doing more stuff on the server apart of showing/hiding the boxes, you'll need to use "server side" controls so here it is.

First, wrap the text boxes with Panel control like this:

<asp:Panel id="pnlTextboxesPlaceholder" runat="server">
    <asp:Textbox runat="server" id="text1"/>
    <asp:Textbox runat="server" id="text2"/>
    <asp:Textbox runat="server" id="text3"/>
</asp:Panel>

Now, in the Page_Load event in code behind make the panel initially hidden by having such code:

pnlTextboxesPlaceholder.style["display"] = "none";

Next step is to "remember" the last state of the panel i.e. visible or hidden.. for this you can use hidden input:

<asp:HiddenField ID="hdnTextboxPanelState" runat="server" Value="hidden" />

Now in the link button click event, have such code:

void LandlineNumber_Click(object sender, EventArgs e)
{
    bool blnHidden = (hdnTextboxPanelState.Value == "hidden");
    pnlTextboxesPlaceholder.style["display"] = blnHidden ? "" : "none";
    hdnTextboxPanelState.Value = blnHidden ? "visible" : "hidden";
}

Finally, place the <hr /> below the Panel and it will show in the correct place every time.