Javascript handling  a collapsible div  and child divs
<p>I have a collapsible div implemented in js, the function of which is show/hide it's child divs etc.</p>

<p>So when you click on it, it toggles the div's disappear. Something similar to a tree view </p>

<p>What i want to do is that, i should be able to select the data in the child divs, but the problem is. when I click on the child divs the parent divs disappears as the onclick gets trigger i guess.</p>

<p>Please suggest how to should i achieve this. So my goal is to toggle a div's display which enclosing child divs,  but if you select something or highlight something in child div the parent div shouldn't collapse etc.</p>

<p>Please see code below.</p>

<pre><code>                        &lt;html&gt;
                &lt;head&gt;
                    &lt;META http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
                    &lt;title&gt;Data&lt;/title&gt;
                    &lt;style&gt;
                        #container {
                            clear: both;
                            width: 400px;
                            margin: 0 0;
                            border: none;
                        }

                        #row {
                            clear: both;
                            width: 100%;
                            border: none;
                        }

                        #column {
                            border: double #aca899;
                            float: left;
                            clear: none;
                            width: 402px;
                        }       

                        #columnHeader p {
                            float: left;
                            clear: none;
                            text-align: center;
                            width: 100%;
                            height: 20px;
                            padding-top: 2px;
                            font-size: 8.0pt;
                            font-family: Verdana;
                            font-weight: bold;
                            color: black;
                            text-decoration: underline;
                            border: 1px ridge #aca899;
                        }

                        #subSectionHeader {
                            float: left;
                            clear: none;
                            width: 50%;
                            font-size: 7.5pt;
                            font-family: Arial;
                            background-color: #DBA083;
                            border: 1px ridge #aca899;
                            border-collapse: collapse;
                            padding: 1px;
                        }       


                        #label {
                            float: left;
                            clear: none;
                            width: 50%;
                            font-size: 7.5pt;
                            font-family: Arial;
                            background-color: #F2CF93;
                            border: 1px ridge #aca899;
                            padding: 1px 1px 1px 11px;
                        }       


                        #Value {
                            float: left;
                            clear: none;
                            width: 50%;
                            font-size: 7.5pt;
                            font-family: Arial;
                            background-color: #DDDDDD;
                            border: 1px ridge #aca899;
                            padding: 1px;
                        }           

                    &lt;/style&gt;
            &lt;script type="text/javascript"&gt;
               function switchMenu(cur, e) {
               var obj = e.target || e.srcElement; //works on IE and FF
               var childDiv = cur.id + 'Child';


                    if (obj.parentNode.id != childDiv) {
                        var el = document.getElementById(childDiv);
                        if (el.style.display != "none") {
                            el.style.display = 'none';
                        }
                        else {
                            el.style.display = '';
                        }
                    }
                }

              &lt;/script&gt;
                &lt;/head&gt;

                &lt;body&gt;
                    &lt;div id="container"&gt;

                        &lt;div style="margin-top: 15px;"&gt;&lt;/div&gt;
                        &lt;div id="row"&gt;
                            &lt;div id="column"&gt;
                            &lt;div id="abc" onclick="switchMenu(this, event)"&gt;

                                &lt;div id="columnHeader"&gt;&lt;p&gt;Section 1&lt;/p&gt;&lt;/div&gt;                   

                                &lt;div id="subSectionHeader"&gt;&lt;p&gt;Some Label I&lt;/p&gt;&lt;/div&gt; &lt;div id="subSectionHeader"&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/div&gt;
                                &lt;div id="abcChild"&gt;
                                &lt;div id="label"&gt;&lt;p&gt;Label&lt;/p&gt;&lt;/div&gt;  &lt;div id="value"&gt;&lt;p&gt;Value&lt;/p&gt;&lt;/div&gt;                  
                                &lt;div id="label"&gt;&lt;p&gt;Label&lt;/p&gt;&lt;/div&gt;  &lt;div id="value"&gt;&lt;p&gt;Value&lt;/p&gt;&lt;/div&gt;                  
                                &lt;div id="label"&gt;&lt;p&gt;Label&lt;/p&gt;&lt;/div&gt;  &lt;div id="value"&gt;&lt;p&gt;Value&lt;/p&gt;&lt;/div&gt;                  
                                &lt;/div&gt;
                                &lt;/div&gt; &lt;!--abc--&gt;

                                &lt;!--cde --&gt;
                                &lt;div id="cde" onclick="switchMenu(this, event)"&gt;
                                &lt;div id="subSectionHeader"&gt;&lt;p&gt;Some Label II&lt;/p&gt;&lt;/div&gt;   &lt;div id="subSectionHeader"&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/div&gt;
                                &lt;div id="cdeChild"&gt;
                                &lt;div id="label"&gt;&lt;p&gt;Label&lt;/p&gt;&lt;/div&gt;  &lt;div id="value"&gt;&lt;p&gt;Value&lt;/p&gt;&lt;/div&gt;
                                &lt;div id="label"&gt;&lt;p&gt;Label&lt;/p&gt;&lt;/div&gt;  &lt;div id="value"&gt;&lt;p&gt;Value&lt;/p&gt;&lt;/div&gt;
                                &lt;div id="label"&gt;&lt;p&gt;Label&lt;/p&gt;&lt;/div&gt;  &lt;div id="value"&gt;&lt;p&gt;Value&lt;/p&gt;&lt;/div&gt;
                                &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;!--cde --&gt;
                            &lt;/div&gt;  

                        &lt;/div&gt;

                    &lt;/div&gt;
                &lt;/body&gt;
            &lt;/html&gt;
</code></pre>

<p>Your suggestion and help will be appreciated 
Thanks for your time.</p>
