JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/ink/2.2.1/js/ink-all.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ink/2.2.1/css/ink.css">
<ul class="ink-tree-view">
  <li class="open"><a href="#">root</a>
    <ul>
      <li><a href="#">child 1</a></li>
      <li class="parent"><a href="#">child 2</a>
        <ul>
          <li><a href="#">grandchild 2a</a></li>
          <li class="parent"><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>

CSS

ul li.closed > a:nth-last-child(2):before,
ul li.open > a:nth-last-child(2):before{
    display: inline-block;
    margin-right: .3em;
    font-family: FontAwesome;
    content: "\f056";
    margin-left: -1.3em;
}
ul li.open > a:nth-last-child(2):before{
    content: "\f056";
}
ul li.closed > a:nth-last-child(2):before{
    content: "\f055";
}

JavaScript

var treeview = new Ink.UI.TreeView( '.ink-tree-view' );