TreeView

How to create a treeview-widget without Javascript.

by 1UnitedPower

HTML

<details data-widget="treeview" open="true">
    <summary>Root</summary>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li data-type="group">
            <details>
                <summary>Group 1</summary>
                <ul>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </details>
        </li>
        <li>
            Item 5
        </li>
    </ul>
</details>

CSS

[data-widget="treeview"]{
   cursor: pointer;   
}

[data-widget="treeview"] summary{
   padding-left: 18px;
   background-image: url("http://icons.iconarchive.com/icons/thvg/wood-folders/16/Glossy-Generic-icon.png");
   background-repeat: no-repeat;    
}
[data-widget="treeview"][open] > summary,
[data-widget="treeview"] details[open] > summary{
   background-image: url("http://icons.iconarchive.com/icons/thvg/wood-folders/16/Glossy-Open-icon.png");  
}


[data-widget="treeview"] li {
    margin-left: 1.5em;
}

[data-widget="treeview"] li:not([data-type="group"]) {
   padding-left: 18px;
   background-image: url("http://icons.iconarchive.com/icons/deleket/adobe-cs4/16/File-Adobe-Dreamweaver-CSS-01-icon.png");
   background-repeat: no-repeat;
}
    
[data-widget="treeview"] summary::-webkit-details-marker{
    display:none;
}