TreeView Samples - InkJS

TreeView #1 - Default Markup

<ul class="ink-tree-view">
    <li class="open">
        <span></span>
        <a href="#">root</a>
        <ul>
            <li>
                <a href="">child 1</a>
            </li>
            <li>
                <span></span>
                <a href="">child 2</a>
                <ul>
                    <li><a href="">grandchild 2a</a></li>
                    <li>
                        <span></span>
                        <a href="">grandchild 2b</a>
                        <ul>
                            <li>
                                <a href="">grandgrandchild 1bA</a>
                            </li>
                            <li>
                                <a href="">grandgrandchild 1bB</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="">child 3</a></li>
        </ul>
    </li>
</ul>
<script>
    var treeView = new Ink.UI.TreeView('.ink-tree-view');
</script>

TreeView #2 - Different Markup... Same behavior

<div class="ink-tree-view" data-child=".child" data-node=".node">
    <div class="node open">
        <span></span>
        <a href="#">root</a>
        <div class="child">
            <div class="node">
                <a href="">child 1</a>
            </div>
            <div class="node">
                <span></span>
                <a href="">child 2</a>
                <div class="child">
                    <div class="node"><a href="">grandchild 2a</a></div>
                    <div class="node">
                        <span></span>
                        <a href="">grandchild 2b</a>
                        <div class="child">
                            <div class="node">
                                <a href="">grandgrandchild 1bA</a>
                            </div>
                            <div class="node">
                                <a href="">grandgrandchild 1bB</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="node"><a href="">child 3</a></div>
        </div>
    </div>
</div>
<script>
    var treeView = new Ink.UI.TreeView('.ink-tree-view');
</script>