Bootstrap collapsible nested nav jquery applies to more than one targets

Question

I have a nested tree nav with collapsible (using Bootstrap 3.0 Collapse) content with icons insted of default list-style. I want to change the icon when the collapsed area is extended. But when I close the inner collapse area, all of icons change back.

I'm a javascript newbie and took the code from this post. It adds class .icon-right to li element on shown.bs.collapse and removes it on hidden.bs.collapse. But it does't apply to only targeted element.

How to edit it to target only icon that is beeing closed?

Here is the code on CodePen: http://codepen.io/anon/pen/PPyrQg.

HTML

<ul class="ls-nav">
      <li id="expand1">
        <a role="button" data-toggle="collapse" href="#collapseContent1" aria-expanded="true" aria-controls="collapseContent1">Lorem Ipsum
        </a>
        <div class="collapse" id="collapseContent1">
          <ul class="ls-inner">
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li>Lorem</li>
            <li id="expand2">
              <a role="button" data-toggle="collapse" href="#collapseContent2" aria-expanded="true" aria-controls="collapseContent2">Lorem Ipsum
               </a>
               <div class="collapse" id="collapseContent2">
              <ul class="ls-inner-dot">
                <li class="active">Lorem</li>
                <li>Lorem</li>
              </ul>
              </div>
            </li>
            <li>Lorem</li>
          </ul>
        </div>
      </li>
      <li>Lorem</li>
      <li>Lorem</li>
      <li>Lorem</li>
    </ul>

JS

      $('#collapseContent1').on('shown.bs.collapse', function () {
    $("#expand1").addClass("icon-down");
  });

  $('#collapseContent1').on('hidden.bs.collapse', function () {
    $("#expand1").removeClass("icon-down");
  });

  $('#collapseContent2').on('shown.bs.collapse', function () {
    $("#expand2").addClass("icon-down");
  });

  $('#collapseContent2').on('hidden.bs.collapse', function () {
    $("#expand2").removeClass("icon-down");
  });

I've been searching for two days and I would be so happy if anyone could help me.

Answer 1

when the event on the #collapseContent2is triggered, the same type of event is triggered on#collapseContent1 because #collapseContent2 is part of #collapseContent1. This is called event bubbling. You can stop an event bubbling up the DOM by calling jQuerys event.stopPropagation function.

$('#collapseContent2, #collapseContent1').on('hidden.bs.collapse', function(e) {
    e.stopPropagation()
    $(this).closest("#expand2").removeClass("icon-down");
});

demo

This would also be an easy fix for your problem.

Answer 2

Just add your aria-controls as a class to your <a> tags, then toggleClass of .icon-down on your expand unique ID's. Here is a working demo with code:

Here is a demo to illustrate how this works:

       <ul class="ls-nav">
          <li id="expand1" >
            <a class="collapseContent1" role="button" data-toggle="collapse" href="#collapseContent1" aria-expanded="true" aria-controls="collapseContent1">Lorem Ipsum
            </a>
            <div class="collapse" id="collapseContent1">
              <ul class="ls-inner">
                <li>Lorem</li>
                <li>Lorem</li>
                <li>Lorem</li>
                <li>Lorem</li>
                <li id="expand2">
                  <a class="collapseContent2" role="button" data-toggle="collapse" class="collapseContent2" href="#collapseContent2" aria-expanded="true" aria-controls="collapseContent2">Lorem Ipsum
                   </a>
                   <div class="collapse" id="collapseContent2">
                  <ul class="ls-inner-dot">
                    <li class="active">Lorem</li>
                    <li>Lorem</li>
                  </ul>
                  </div>
                </li>
                <li>Lorem</li>
              </ul>
            </div>
          </li>
          <li>Lorem</li>
          <li>Lorem</li>
          <li>Lorem</li>
      </ul>

JS:

  $('.collapseContent2').on('click', function() {
    $("#expand2").toggleClass("icon-down");
  });

    $('.collapseContent1').on('click', function() {
    $("#expand1").toggleClass("icon-down");
  });

CODEPEN DEMO