$(function() {
  // main expansion element
  $(".expander").click(function() {
    var subShown = $("ul > li", this).hasClass("show");
    if (!subShown) {
      $(".indented", this).slideDown('100').addClass("show");
      $(".caret", this).addClass("reversedCaret");
    } else {
      $(".indented", this).slideUp('100').removeClass("show");
      $(".caret", this).removeClass("reversedCaret");
      $(".indented--sub").slideUp('100').removeClass("show");
      $(".sub-caret").removeClass("reversedCaret");
      $(".more-or-less").text("More");
    }
  });

  // sub expansion element
  $(".sub-expander").click(function() {
    var subSelectText = $(".more-or-less").text();
    if (subSelectText != "More") {
      $(".indented--sub").slideUp('100').removeClass("show");
      $(".sub-caret").removeClass("reversedCaret");
      $(".more-or-less").text("More");
    } else {
      $(".indented--sub").slideDown('100').addClass("show");
      $(".sub-caret").addClass("reversedCaret");
      $(".more-or-less").text("Show Less");
    }
  });

  // stop propagation on the link element within .expander class
  $(".indented").click(function(event) {
    event.stopPropagation();
  });
});

.expander:hover {
  cursor: pointer;
}

.sub-expander--indented {
  padding: 0 0 0 23px;
}

.sub-caret {
  margin-right: 75px;
}

.indented,
.indented--sub {
  display: none;
}

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="expander">
  <span class="caret downCaret right visibleCaret">+</span>
  <ul>
    <li class="category">Item 1
      <a href="http://www.google.com"></a>
    </li>
    <li class="indented"><a href="http://www.google.com">Item 2</a></li>
    <li class="indented"><a href="http://www.google.com">Item 3</a>

      <ul class="sub-expander more" style="padding-top: 
0px;">
        <li class="indented--sub"><a href="http://www.google.com" class="moreLiAs">Chapter 5</a></li>
        <li class="indented--sub"><a href="http://www.google.com" class="moreLiAs">Chapter 6</a></li>
        <li class="indented--sub"><a href="http://www.google.com" class="moreLiAs">Chapter 7</a></li>
        <span class="sub-caret moreCaret visibleLessCaret right">+</span>
        <li class="more-or-less less sub-expander--
indented">More</li>
      </ul>
    </li>
  </ul>
</div>