Showing and Hiding DIV using JavaScript

In this article I will tell you that how to show and hide the div dynamically. I have used JavaScript code to perform this operation. Also this showing and hiding of the Div will be perform on the click event of an Image. The purpose of using the Image is that you can distinguish between both the show and hide operation. You can also change the Image for both the operation. Also we are not using very complex code to do this. We are using very simple code and JavaScript to perform this.

Free Download: Show and Hide Div: Demo Project

JavaScript Code:

  <script type="text/javascript">

        function DivExpandFun(divid, FixedImg, upImg, downImg) {
            if (typeof ccollect != "undefined") {
                if (document.getElementById(divid).style.display != "none") {
                    document.getElementById(divid).style.display = "none"
                    document.getElementById(FixedImg).src = downImg;
                    document.getElementById(FixedImg).title = "Open div"
                }
                else {
                    document.getElementById(divid).style.display = "block"
                    document.getElementById(FixedImg).src = upImg;
                    document.getElementById(FixedImg).title = "Close div"
                }
            }
        }

        function GetStyle(classname) {
            ccollect = new Array()
        }

        function do_onload() {
            GetStyle("hideContent")//give the name of style class
        }

        if (document.getElementById)
            window.onload = do_onload

</script>

<style type="text/css">
.hideContent
{
    display: block;
}
</style>

Source Code:

<table style="width: 250px; border: solid 1px gray; background-color: Silver;">
        <tr> 
 <td> 
 <span>My Details</span> 
 </td> 
 <td align="right">
<a onclick="DivExpandFun('Mydiv','Image1','<%=ResolveUrl("~/addCategory.jpg")%>',

         '<%=ResolveUrl("~/addCategory.jpg")%>');">
<img id="Image1" src='addCategory.jpg' title="Close div" height="20" width="20" /></a> 
 </td> 
 </tr> 
 </table> 

 <div id="Mydiv" class="hideContent">
        <table style="padding: 5px; width: 250px; border: solid 1px gray">
            <tr> 
 <td> 
 <b>Name:</b> Purushottam Rathore<br />
                    <b>Address:</b><br />
                    <b>City:</b> Noida<br />
                    <b>Pin Code:</b> 201301<br />
                    <b>Country:</b> India
                </td> 
 </tr> 
 </table>