Multiple Div Layer of Expand/Collapse using Java Script and CSS.

Many times, we need to use multiple level div in our project like if we need to show payment or contact details. This code will help you short out that type of problem. We can open/close the div on click on that .in this article I have used the javascript and css to get this output




Design:-




Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExpandandCollapse.aspx.cs"
    Inherits="ExpandandCollapse" %>

<!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 id="Head1" runat="server">
    <title>Multiple Div Layer of Expand/Collapse</title>
    <script src="http://code.jquery.com/jquery-1.4.3.min.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            font-size: .90em;
            font-family: @Times New Roman;
            margin: 10px;
            padding: 0px;
            background-color: #fbd799;
        }
        #toggle
        {
            width: 400px;
            display: block;
        }
        .heading
        {
            background-color: #32808e;
            height: 25px;
            padding: 5px 5px;
            color: White;
            cursor: pointer;
            position: relative;
            border-bottom: 1px solid #fff;
        }
       
        .content
        {
            line-height: 20px;
            background-color: #55b6bb;
            min-height: 100px;
            padding: 15px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".content").hide();
            $(".heading").click(function () {
                $(this).next(".content").slideToggle(100);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>
            Multiple Div Layer of Expand/Collapse
        </h2>
        <div id="toggle">
            <div class="heading">
                Expand/Collapse For Single Div
            </div>
            <div class="content">
                <p>
                    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.<br />
                    http://www.neerajcodesolutions.com/2014/03/expand-and-collapse-using-java-script.html
                </p>
            </div>
            <div class="heading">
                Add social media buttons in web site or blog</div>
            <div class="content">
                <p>
                    Now a days social media is one the best way to growing the audience and make our
                    web site or blog to more popular so for the making of the audience we can add the
                    social media buttons in our web site or blog.
                    <br />
                    http://www.neerajcodesolutions.com/2015/06/how-to-add-social-media-buttons-in-web.html
                </p>
            </div>
            <div class="heading">
                Contact Details</div>
            <div class="content">
                <p>
                    Neeraj Srivastava<br />
                    srinickraj@gmail.com<br />
                    http://www.neerajcodesolutions.com
                </p>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

 Out-Put:


Multiple Div Layer of Expand/Collapse using Java Script and CSS. Multiple Div Layer of Expand/Collapse using Java Script and CSS. Reviewed by NEERAJ SRIVASTAVA on 2:58:00 PM Rating: 5

No comments:

Powered by Blogger.