Home/ Questions/Q 7600675
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:58:10+00:00

HTML Code <%@ Page Language=C# AutoEventWireup=true CodeBehind=WebForm1.aspx.cs Inherits=WebApplication1.WebForm1 %> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML

  • 0

HTML Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!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>
    <style type="text/css">
        .msg_body
        {
            display: none;
        }
    </style>
    <script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript">

    </script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(".msg_head").click(function () {
                $(this).next(".msg_body").slideToggle();
            })

            $(".msg_headRoot").click(function () {
                $(this).next(".msg_bodyRoot").slideToggle();
            })

        .toggle(function () {
            $(this).children("span").text("[+]");
        }, function () {
            $(this).children("span").text("[-]");
        });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="msg_headRoot" style="cursor: pointer;">
        <p class="msg_headRoot" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
            <span>[+]&nbsp;</span>Root
        </p>
        <div class="msg_bodyRoot">
            <div class="msg_head" style="cursor: pointer;">
                <p class="msg_head" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
                    <span>[+]&nbsp;</span>Hello
                </p>
                <div class="msg_body">
                    Div text
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Query

Right now it is keeping the div opened. I want to keep the div closed by default and user should click the plus to open it.

EDIT

Forgot to mention the root div. I have actually one nested div. I meant on click the plus of outer dive should open the inner div

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    CSS:

    .msg_body, .msg_bodyRoot {display: none;}​

    Updated JS:

    $(document).ready(function() {
    var toggler = function(elem) {
        elem.slideToggle(500, function() {
            if (elem.is(':visible')) {
                elem.parent().find("p:first > span").text("[-]");
            } else {
                elem.parent().find("p:first > span").text("[+]");
            }
        });
    };
    $('div.msg_headRoot').click(function(e) {
        toggler($(this).children(".msg_bodyRoot"));
        e.preventDefault();
        return false;
    });
    $("div.msg_head").click(function(e) {
        toggler($(this).children(".msg_body"));
        e.preventDefault();
        return false;
    });
});

    Working fiddle: http://jsfiddle.net/N9E9b/2/

    • 0