Sitemap through collapsible nested lists

by agib

HTML

<a href="javascript:void(0)" id="close-all">Close all</a>

<ul>
    <li>Dashboard</li>
    <li class="parent"><span class="parent-name">Forms</span>

        <ul>
            <li class="parent"><span class="parent-name">Form A</span>

                <ul>
                    <li>Overview</li>
                    <li class="parent"><span class="parent-name">Build</span>

                        <ul>
                            <li>Form fields</li>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </li>
                    <li class="parent"><span class="parent-name">Settings</span>

                        <ul>
                            <li>General</li>
                            <li>Email and Redirects</li>
                            <li>Security</li>
                            <li>User Access</li>
                            <li>Approvals</li>
                            <li>Integration Hub</li>
                            <li>Plugins</li>
                        </ul>
                    </li>
                    <li>Publish</li>
                    <li>Submissions</li>
                </ul>
            </li>
            <li>Form B</li>
            <li>Form ...</li>
        </ul>
    </li>
    <li>Themes</li>
    <li>Users</li>
</ul>

CSS

body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 14Px;
}
ul li {
    list-style-type: none;
    /*padding: 1px;*/
}
li > ul {
    display: none;
}
.parent-name {
    background-color: #E9E9E9;
    cursor: pointer;
}
.highlight {
    background-color: #222;
    color: #F9F9F9;
}
#close-all {
    display: inline-block;
    float: right;
}
ul > li {
    margin-left: 18px;
}