jQuery expansion menu I have a menu done in jQuery that I'd like some feedback on:



$(function() {
  // main expansion element
  $(".expander").click(function() {
    var subShown = $("ul &gt; 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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;

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

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




This just seems like a really over the top way to do it, but the one thing I'm having a hard time with is differentiating the sub menu from the main expander without it's own class/ID. 

Do you have any tips on how to improve this?
Feedback
The code makes good use of the jQuery slide functions, as well as basic CSS class addition/removal.
One could utilize event delegation to use a single event listener on a parent container element, along with .is() and tree traversal methods like .parent().
Tips to improve this
Utilize .toggle() and .toggleClass(), along with dynamic function call using a variable (e.g. $(&quot;.indented&quot;, this)[slideFunction]('100') where slidefunction is a variable containing the function to call) to condense the code.
Also, as mentioned above, use event delegation to register a single click handler. Then check if the target is a child of various elements (e.g. with class indented, with class sub-expander, etc.), and handle actions accordingly.


$(function() {
  // main expansion element
  $(".expander").click(function(event) {
    var target = $(event.target);
    // stop propagation on the link element within .expander class
    if (!target.parent('.indented').length) {
      // sub expansion element
      if (target.parent('.sub-expander').length) {
        var subSelectTextIsMore = $(".more-or-less").text() === "More";
        var slideFunction = subSelectTextIsMore ? 'slideDown' : 'slideUp';

        $(".indented--sub")[slideFunction]('100').toggleClass("show", subSelectTextIsMore);
        $(".sub-caret").toggleClass("reversedCaret", subSelectTextIsMore);
        $(".more-or-less").text(subSelectTextIsMore ? "Show Less" : "More");
      } else { //expander
        var subShown = $("ul &gt; li", this).hasClass("show");
        var slideFunction = subShown ? 'slideUp' : 'slideDown';
        $(".indented", this)[slideFunction]('100').toggleClass("show", !subShown);
        $(".caret", this).toggleClass("reversedCaret", !subShown);
        if (subShown) {
          $(".indented--sub").slideUp('100').removeClass("show");
          $(".sub-caret").removeClass("reversedCaret");
          $(".more-or-less").text("More");
        }
      }
    }
  });
});
.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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;

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

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