YEAH!

YEAH!

by TheDiamondDoge

HTML

<div class="init">
  <ul>

    <li><span><a href = "#">Start</a></span></li>

    <div class="hide" style="display:none">
      <ul>
        <li><span><a href = "#">Second-1</a></span></li>
        <div class="hide" style="display:none">
          <ul>
            <li><span><a href = "#">Third-1</a></span></li>
            <li><span><a href = "#">Third-2</a></span></li>
            <li><span><a href = "#">Third-3</a></span></li>
            <li><span><a href = "#">Third-4</a></span></li>
          </ul>

        </div>
      </ul>

      <ul>
        <li><span><a href = "#">Second-2</a></span></li>
        <li><span><a href = "#">Second-3</a></span></li>
        <div class="hide" style="display:none">
          <ul>
            <li><span><a href = "#">Third-5</a></span></li>
            <li><span><a href = "#">Third-6</a></span></li>
            <li><span><a href = "#">Third-7</a></span></li>
          </ul>
        </div>
        <li><span><a href = "#">Second-4</a></span></li>
      </ul>
    </div>
  </ul>
</div>

JavaScript

$("li").click(function() {
  //$(this).next("div").toggle();
  var x = $(this).next("div");
  if (x.attr("style") == "display:none") {
    window.setTimeout(function() {
      x.toggle();
    }, 2000);
  } else {
    x.toggle();
  }
});