title: bootstrap collapse event fired multiple times
body: <p>I created a menu with collapsible items in which the arrow will change on click</p>
  
  <ul>
  <li>Collapse closed : <code>fa-caret-right</code></li>
  <li>Collapse opened : <code>fa-caret-down</code></li>
  </ul>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="list-unstyled"&gt;
      ....
      &lt;li&gt;
          &lt;a href="#level2" data-toggle="collapse" aria-expanded="false"&gt;&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;Level 2&lt;/a&gt;
          &lt;ul class="collapse list-unstyled" id="level2" data-parent="#parent"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Level 2.1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Level 2.2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      ....
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.collapse').on('show.bs.collapse', function ()
  {
      $(this).prev().find('svg').addClass('fa-caret-down').removeClass('fa-caret-right');
  });     
  $('.collapse').on('hide.bs.collapse', function ()
  {
      $(this).prev().find('svg').addClass('fa-caret-right').removeClass('fa-caret-down');
  }); 
  </code></pre>
  
  <p>The problem is that when I click on a sub element, the event is fired two times, not only for the current element but also on the parent.</p>
  
  <p><a href="https://i.stack.imgur.com/8h3R0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8h3R0.png" alt="enter image description here"></a> <a href="https://i.stack.imgur.com/UHUGj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UHUGj.png" alt="enter image description here"></a></p>
  
  <p>As you can see in the images, when I closed level 2, the event was also applied to level 1 and the icon changed from <code>fa-caret-down</code> to <code>fa-caret-right</code></p>