Jquery Simple Tree UI

Jquery Simple Tree UI with ul & li Traverse n' ul > li childs

by austinnoronha

HTML

<ul>
  <li><a href="javascript:;">Root</a></li>
  <li><a href="javascript:;">Sem Mor 2</a>
    <ul>
      <li><a href="javascript:;">Sub Section 1</a></li>
      <li><a href="javascript:;">Sub Section 2</a>
        <ul>
          <li><a href="javascript:;">Inner 1</a></li>
          <li><a href="javascript:;">Inner 2</a></li>
          <li><a href="javascript:;">Inner 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="javascript:;">Rocket</a></li>
</ul>

CSS

ul li {
  list-style: none;
}

ul li a {
  text-decoration: none;
  cursor: pointer;
}

.is_folder > a {
  color: red;
}

.has_child {
  border-left: 1px dotted #ddd;
  margin: 2px 3px;
}

.has_child > a {
  color: blue;
  padding-left: 8px;
}

.has_child > ul {
  background-color: #f7f7f7;
  padding-left: 15px;
  display: none;
}

JavaScript

$(document).ready(function() {

  var ul = $("ul");

  //ul.find("li > ul").hide()

  var traverseLi = function(ulObj) {
    $.each(ulObj.find("li"), function(i, el) {
      $(el).addClass("is_folder");
      if ($(el).find("ul").length > 0) {
        traverseLi($(el).find("ul"));
        $(el).addClass("has_child");
        $("a", el).on("click", function(e) {
          if ($(this).parent().children("ul").is(":visible")) {
            $(this).parent().children("ul").hide();
          } else {
            $(this).parent().children("ul").show();
          }
        });
      }
    });
  }

  traverseLi(ul);
});