jQuery collapsed nested un-ordered list

by Oliver Kelso

HTML

<ul id="collapse">
    <li>level 1
        <ul>
            <li>level 2
                <ul>
                    <li>level 3</li>
                    <li>level 3
                        <ul>
                            <li>level 4</li>
                            <li>level 4</li>
                            <li>level 4</li>
                            <li>level 4</li>
                        </ul>
                    </li>
                    <li>level 3
                        <ul>
                            <li>level 4</li>
                            <li>level 4</li>
                            <li>level 4</li>
                            <li>level 4</li>
                        </ul>
                    </li>
                    <li>level 3</li>
                </ul>
            </li>
            <li>level 2
                <ul>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
                </ul>
            </li>
            <li>level 2
                <ul>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
                </ul>
            </li>
            <li>level 2
                <ul>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>level 1
        <ul>
            <li>level 2
                <ul>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
                </ul>
            </li>
            <li>level 2
                <ul>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
                    <li>level 3</li>
               ...

CSS

#collapse * {
    display:block;
    list-style:none;
    cursor:pointer;
    text-transform:uppercase;
}
#collapse ul li {
}
.open{}

JavaScript

$(function () {
    $("#collapse li").children('ul').hide();
    $("#collapse li").on('click', function (event) {
        $(this).children('ul').stop().slideToggle(350);
        $(this).toggleClass("open");
        event.stopPropagation();
    });
});