JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a>
      <ul>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a>
          <ul>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a>
              <ul>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
</ul>

CSS

li { padding-left: 20px; }

JavaScript

$("li").click(function(e) {
    $(this).children('ul').toggle(400);
    return false;
});