Closed Div by default
<h2>HTML Code</h2>

<pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style type="text/css"&gt;
        .msg_body
        {
            display: none;
        }
    &lt;/style&gt;
    &lt;script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript"&gt;

    &lt;/script&gt;
    &lt;script language="javascript" type="text/javascript"&gt;
        $(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("[-]");
        });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
    &lt;div class="msg_headRoot" style="cursor: pointer;"&gt;
        &lt;p class="msg_headRoot" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;"&gt;
            &lt;span&gt;[+]&amp;nbsp;&lt;/span&gt;Root
        &lt;/p&gt;
        &lt;div class="msg_bodyRoot"&gt;
            &lt;div class="msg_head" style="cursor: pointer;"&gt;
                &lt;p class="msg_head" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;"&gt;
                    &lt;span&gt;[+]&amp;nbsp;&lt;/span&gt;Hello
                &lt;/p&gt;
                &lt;div class="msg_body"&gt;
                    Div text
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h2>Query</h2>

<p>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.</p>

<h2>EDIT</h2>

<p>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</p>
