Expand and collapse div using java script


In this article , we are expand(show) and collapse(hide) div using java script , reason of choosing java script because it is a client side language so it never hit on server so Div open and close very quickly . i have direct paste the source code for you  

Source code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


    <script type="text/javascript">
        function expand() {
            document.getElementById("show").style.display = "none";
            document.getElementById("hide").style.display = "block";
        }
        function collapse() {
            document.getElementById("hide").style.display = "none";
            document.getElementById("show").style.display = "block";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a id="show" href="javascript:expand();">Expand</a>
        <div id="hide" style="display: none">
            <a href="javascript:collapse();">Collapse</a>
            <div class="Image">
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/image/img.jpg" />
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Out-put:-



Expand and collapse div using java script Expand and collapse div using java script Reviewed by NEERAJ SRIVASTAVA on 12:11:00 PM Rating: 5

1 comment:

Powered by Blogger.