CODEWITHSUNDEEP
jqueryhtmlcsstreetreeview
BurebistaRuler
BurebistaRuler

Reputation: 6519

Create a collapsible/expandable CSS 2 tree

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

Upvotes: 0

Views: 3683

Answers (2)

Leedehai
Leedehai

Reputation: 3940

Just created a single HTML with CSS and JS embedded for this kind of task. GitHub repo, the link will stay valid as I have no plan to remove it.

Upvotes: 0

Dmitry Sheiko
Dmitry Sheiko

Reputation: 2192

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

Evergreen browser all support the elements, for legacy to can use a polyfill. e.g. https://github.com/javan/details-element-polyfill

Upvotes: 7

Related Questions