jQuery expansion menu

Question

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

$(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>

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?

Answer 1

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. $(".indented", 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 > 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;
}

<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>