I want to create an ul li tree menu based on html and css only, maybe a small jQuery.

so this is my html:

```
<div class="wfm">
        <ul class="firstUl">
            <li>
            <span>Parent1</span>
                <ul>
                    <li>
                            <span>Parent2</span>
                        <ul>
                            <li>
                                <span>Parent3</span>
                                <ul>
                                    <li>
                                       <span>Parent4</span>
                                        <ul>
                                            <li>
                                                <span>Child4</span>
                                            </li>
                                            <li>
                                                <span>Child4</span>
                                            </li>
                                            <li>
                                               <span>Child4</span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                       <span>Parent4</span>
                                    </li>
                                    <li>
                                        <span>Parent4</span>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                  </ul>
            </li>
      </ul>
    </div>

```

and this is the css trick to show ul content:

```
 .subParent,.subParent1,.subParent2,.subParent3{
    display: none;
}

li:focus .subParent,li:focus .subParent1,li:focus .subParent2,li:focus .subParent3{
    display: block;
}

```

My problems:
1: when I click on first parent all tree is expanded and not only parent2;
2: I can hide that ul's using css `display:none` and bring back with `:focus` event but how can I collapse that tree.

**[FIDDLE](http://jsfiddle.net/DMfvx/206/)**
['https://Stackoverflow.com/questions/18233232', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1192687/']
Well, why not leverage details/summary elements of HTML5.1? It requires no JavaScript and customizable via CSS. Here an example 

```
<details class="tree-nav__item is-expandable">
    <summary class="tree-nav__item-title">The Realm of the Elderlings</summary>
    <details class="tree-nav__item is-expandable">    
      <summary class="tree-nav__item-title">The Six Duchies</summary>
         <a class="tree-nav__item-title"><i class="icon ion-ios-bookmarks"></i> Assassin’s Apprentice</a>
    </details>
</details>

```

<https://codepen.io/dsheiko/pen/MvEpXm/> 

[![enter image description here](https://i.stack.imgur.com/K8Xhh.png)](https://i.stack.imgur.com/K8Xhh.png)

Evergreen browser all support the elements, for legacy to can use a polyfill. e.g. <https://github.com/javan/details-element-polyfill>
Just created a single HTML with CSS and JS embedded for this kind of task.
[GitHub repo](https://github.com/Leedehai/expandable-tree-list), the link will stay valid as I have no plan to remove it.