Category Archives: JavaScript

Sample JavaScript Show/Hide Div function

Posted by Altaf

This example runs both on Firefox and IE.

This is an example of how to show hide html div using JavaScript:

For this sample i am taking two div two show/hide independently depending on a button.

ASPX CODE:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxShowHideDiv.aspx.cs"
    Inherits="MCTSASP3._5.Chapter6Ajax.Lesson2.AjaxShowHideDiv" %>

<!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>ScriptExample</title>
    <script language="javascript" type="text/javascript">
        function CollapseOrExpandDiv(divToHide, buttonName) {
            var divCollapse = document.getElementById(divToHide);
            var button = document.getElementById(buttonName);
            if (divCollapse.style.display == "") {
                divCollapse.style.display = "none";
                button.value = "Expand";
            }
            else {
                divCollapse.style.display = "";
                button.value = "Collapse";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <div style="border: 1px double #66CCFF; background-color: #66CCFF; height: 23px;
                color: White;">
                <div style="margin: 3px 0px 0px 0px; float: left; font-weight: bold; font-family: Calibri;
                    color: #FFFFFF; vertical-align: middle; font-size: 16px;">
                    My Element Title
                </div>
                <div style="float: right; vertical-align: middle;">
                    <%--<asp:Button ID="Button1" ClientID="Button1" runat="server" Text="Collapse"
                        Font-Bold="True" Font-Names="Calibri"
                        Font-Size="XX-Small" OnClientClick="CollapseOrExpandDiv()"
                        BackColor="#C1EBFF" BorderStyle="None"/>--%>
                    <input type="button" id="Button1" value="Collapse" onclick="CollapseOrExpandDiv('divCollapse','Button1')"
                        style="font-family: calibri; font-size: small; font-weight: bold; background-color: #33CCFF;
                        border-style: solid; border-width: 1px" />
                </div>
            </div>
            <div id="divCollapse" style="border: 1px solid #66CCFF; height: auto;">
                <div style="margin: 10px; text-align: left; color: #3399FF">
                   <h3> The Bing Application Programming Interface (API)</h3>
                    Version 2
                    <hr />
                    enables developers to
                    build applications that can: Retrieve information from the Internet Monetize an
                    application with advertisements Improve and enhance search requests and results
                    Find location-specific information Translate terms and blocks of text
                </div>
            </div>
        </div>
        <br />
           <div>
            <div style="border: 1px double #66CCFF; background-color: #66CCFF; height: 23px;
                color: White;">
                <div style="margin: 3px 0px 0px 0px; float: left; font-weight: bold; font-family: Calibri;
                    color: #FFFFFF; vertical-align: middle; font-size: 16px;">
                    My Element Title
                </div>
                <div style="float: right; vertical-align: middle;">
                    <%--<asp:Button ID="Button1" ClientID="Button1" runat="server" Text="Collapse"
                        Font-Bold="True" Font-Names="Calibri"
                        Font-Size="XX-Small" OnClientClick="CollapseOrExpandDiv()"
                        BackColor="#C1EBFF" BorderStyle="None"/>--%>
                    <input type="button" id="Button2" value="Collapse" onclick="CollapseOrExpandDiv('div1', 'Button2')"
                        style="font-family: calibri; font-size: small; font-weight: bold; background-color: #33CCFF;
                        border-style: solid; border-width: 1px" />
                </div>
            </div>
            <div id="div1" style="border: 1px solid #66CCFF; height: auto;">
                <div style="margin: 10px; text-align: left; color: #3399FF">
                   <h3> The Bing Application Programming Interface (API)</h3>
                    Version 2
                    <hr />
                    enables developers to
                    build applications that can: Retrieve information from the Internet Monetize an
                    application with advertisements Improve and enhance search requests and results
                    Find location-specific information Translate terms and blocks of text
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

JavaScript Code:

This method take a div and a button name to show/hide the respective div element.

<script language="javascript" type="text/javascript">
        function CollapseOrExpandDiv(divToHide, buttonName) {
            var divCollapse = document.getElementById(divToHide);
            var button = document.getElementById(buttonName);
            if (divCollapse.style.display == "") {
                divCollapse.style.display = "none";
                button.value = "Expand";
            }
            else {
                divCollapse.style.display = "";
                button.value = "Collapse";
            }
        }
    </script>