How to create nested tree open/close buttons with pure javascript
<p>I have the following html structure. When someone clicks on the "switch" divs I want to add a hide class to the content div and branch ul siblings. When clicked on again I want to remove them.  I can write the click event, but I don't know how to reference the nested content and branch from the click event.</p>

<pre><code>&lt;ul id="tree"&gt;
    &lt;li class="leaf"&gt;
        &lt;div class="switch"&gt;&lt;/div&gt;
        &lt;div class="content"&gt;
            ... stuff
        &lt;/div&gt;
        &lt;ul class="branch"&gt;
            &lt;li class="leaf"&gt;
                &lt;div class="switch"&gt;&lt;/div&gt;
                &lt;div class="content"&gt;
                    ... stuff
                &lt;/div&gt;
                &lt;ul class="branch"&gt;
                    &lt;!-- Can be many layers deep --&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="leaf"&gt;
        &lt;div class="switch"&gt;&lt;/div&gt;
        &lt;div class="content"&gt;
            ... stuff
        &lt;/div&gt;
        &lt;ul class="branch"&gt;
            &lt;li class="leaf"&gt;
                &lt;div class="switch"&gt;&lt;/div&gt;
                &lt;div class="content"&gt;
                    ... stuff
                &lt;/div&gt;
                &lt;ul class="branch"&gt;
                    &lt;!-- Can be many layers deep --&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;!-- Can be many more of these --&gt;
&lt;/ul&gt;
</code></pre>

<p>Javascript</p>

<pre><code>var Library = (function () {
    "use strict";


    /**
     * Create click events for all classes passed in.
     *
     * This is used by newer browsers that have getElementsByClassName.
     *
     * @param {array} class_names The class names to attatch click events to.
     * @param {function} The callback to handle the click event.
     *
     * @return void
     */
    var classNameClick = function(class_names, clickEvent) {
        for(var i = 0; i &lt; class_names.length; i++) {
            var elements = document.getElementsByClassName(class_names[i]);
            for(var j = 0; j &lt; elements.length; j++) {
                elements[j].onclick = clickEvent;
            }
        }
    };

    /**
     * Loops through all DOM elements to find classes to attatch click events to.
     *
     * This is used by older browsers that don't have getElementsByClassName
     *
     * @param {array} class_names The class names to attatch click events to.
     * @param {function} The callback to handle the click event.
     *
     * @return void
     */
    var classTagClick = function(class_names, clickEvent) {
        var elements = document.getElementsByTagName("*");
        for(var i = 0; i &lt; elements.length; i++) {
            var element = elements[i];
            for(var j = 0; j &lt; class_names.length; j++) {
                if(element.className.indexOf(class_names[j]) &gt;= 0) {
                    element.onclick = function() {
                        clickEvent();
                    }
                }
            }
        }
    };

    return {

        /**
         * Loops through all DOM elements to find classes to attatch click events to.
         *
         * @param {array} class_names The class names to attatch click events to.
         * @param {function} The callback to handle the click event.
         *
         * @return void
         */
        classClick : function(class_names, clickEvent) {
            if (typeof document.getElementsByClassName !== "undefined") {
                classNameClick(class_names, clickEvent);
            } else {
                classTagClick(class_names, clickEvent);
            }
        }

    };
}());

var Tree = (function () {
    "use strict";

    return {

        construct : function () {

            Library.classClick("switch", function() {
                // Not sure how to reference the relevant content and branch class here.
            });

        }
    };
}());

window.onload = function() {
    Tree.construct();
}
</code></pre>

<p>I can't use jQuery or other libraries (It's easy with jQuery).</p>
