How to change the position of the Horizontal line dynamically?

advertisements

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 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>