title: Why is event.stopPropagation also stopping my Bootstrap Collapse?
body: <p>I have a list item (<code>#planAdminMenuItem</code>) that has an <code>onclick</code> attribute. This list item has an icon inside of it (<code>.spinner</code>) that will collapse <code>#collapseExample</code>. Whenever the <code>.spinner</code> is clicked, I want it to run bootstrap collapse only. I do not want it to run <code>drawPlanAdmin</code> function. I have tried adding event.stopPropagation to my <code>toggleSpinnerLeftMenu</code> function, but whenever I do that, it also stops the bootstrap collapse. The parent click is blocked, but so is bootstrap collapse.</p>
  
  <p><strong>THE PHP &amp; HTML CODE</strong></p>
  
  <pre><code>&lt;ul&gt;            
      &lt;li id="planAdminMenuItem" onclick="plan.drawPlanAdmin();"&gt; 
          Book Plan
          &lt;span class="icn icn-chevron-down spinner" onclick="ui.toggleSpinnerLeftMenu(this,event);" data-toggle="collapse" data-target="#collapseExample" data-aria-expanded="true" aria-controls="collapseExample"&gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;!-- the collapsable area --&gt;               
      &lt;li id="collapseExample" class="collapse in"&gt;
          &lt;ul&gt;
              &lt;li onclick="plan.drawRunListAdmin();"&gt;
                  Run List View
              &lt;/li&gt;
              &lt;li onclick="plan.drawLadderAdmin();"&gt; 
                  Ladder View
              &lt;/li&gt;               
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>THE JS CODE</strong></p>
  
  <pre><code>toggleSpinnerLeftMenu:function(el,event){
      el = jQuery(el);
  
      if(el.hasClass('icn-chevron-up')){
          el.addClass('icn-chevron-down');
          el.removeClass('icn-chevron-up');
      }else if(el.hasClass('icn-chevron-down')){
          el.addClass('icn-chevron-up');
          el.removeClass('icn-chevron-down');
  
      }
      event.stopPropagation(); //why is this stopping the collapse also?
  },
  </code></pre>