Nested collapsible sections

by Alon Rotem

HTML

<ul>
    <li><span class="customCollapseHeader">Root</span>

        <div class="customCollapseSection">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas ut lacus nec suscipit. Vestibulum purus neque, porta a vestibulum eget, mollis sed urna. Mauris a magna risus. Praesent id orci eu enim laoreet interdum. Donec pharetra metus sit amet tristique sodales. Aliquam eget metus id ipsum cursus mollis. Donec at posuere nunc. Cras enim nunc, porttitor id magna eu, venenatis convallis dui. Donec at ipsum at urna sollicitudin ullamcorper. Fusce porttitor molestie risus et viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec porta nec lorem at gravida. Maecenas molestie auctor aliquet.</p>
            <ul class="BulletList">
                <li><span class="customCollapseHeader">How much does a hipster weigh?</span>

                    <div class="customCollapseSection">
                        <ol class="LatinList">
                            <li>An instagram!</li>
                        </ol>
                    </div>
                </li>
                <li><span class="customCollapseHeader">Stages of debugging</span>

                    <div class="customCollapseSection">
                        <ol class="LatinList">
                            <li>That can't happen</li>
                            <li>That doesn't happen on my machine</li>
                            <li>That shouldn't happen</li>
                            <li>Why does that happen??</li>
                            <li>Oh, I see...</li>
                            <li>How did that ever work??!</li>
                        </ol>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>

CSS

ul {
    list-style-type: none;
}
li {
    margin-top: 10px;
    margin-bottom: 10px;
}

JavaScript

var headerSelector = ".customCollapseHeader";
    var collapseSectionSelector = ".customCollapseSection";
    var closedSection = " + ";
    var openSection = " - ";

    $(document).ready(function () {
        $(headerSelector).css("cursor", "pointer");
        $(headerSelector).siblings(collapseSectionSelector).hide();
        $(headerSelector).prepend(closedSection);
        $(headerSelector).click(function (e) {
            $(this).siblings(collapseSectionSelector + ":first").slideToggle();
            $(this).html(function (h, oldHtml) {
                var newHtml = oldHtml;
                if (oldHtml.substr(0, 3) == closedSection) {
                    newHtml = openSection + oldHtml.substr(3);
                } else if (oldHtml.substr(0, 3) == openSection) {
                    newHtml = closedSection + oldHtml.substr(3);
                }
                return newHtml;
            });
        });
    });