title: Nested collapses calling parent collapse every time
body: <p>I've searched and found a few similar answers - but those were surrounding accordions which I am not using.</p>
  
  <p>I have nested collapse items <a href="https://codepen.io/anon/pen/djLjPe" rel="nofollow noreferrer">as seen in this codepen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#collapseOutter').on('show.bs.collapse', function(event) {
    $('#collapseBtn').html("Show Less");
    console.log('Only happen when outter div is opened');
    event.stopPropagation();
    console.log('even with stopping propagation it fires');
  })
  $('#collapseOutter').on('hide.bs.collapse', function() {
    $('#collapseBtn').html("Show More");
    console.log('Only happen when outter div is collapsed');
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="container"&gt;
    &lt;div class="row ml-4"&gt;
      &lt;div class="row header-div"&gt;
        &lt;a id="collapseBtn" class="btn-info btn" data-toggle="collapse" href="#collapseOutter" role="button" aria-expanded="false" aria-controls="collapseOutter"&gt;
      Show More
    &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row ml-4"&gt;
      &lt;div id="collapseOutter" class="collapse"&gt;
        &lt;p&gt;Here is a paragraph about the data you're about to see.&lt;/p&gt;
        &lt;div class="row"&gt;
          &lt;div id="item-a"&gt;
            &lt;a id="item-a" class="" data-toggle="collapse" href="#collapseInnerA"&gt;
        Item One of a list
       &lt;/a&gt;
            &lt;br /&gt;
            &lt;div id="collapseInnerA" class="collapse"&gt;
              &lt;div class="row"&gt;
                &lt;p class="ml-4"&gt;Item One Related Information&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div id="item-b"&gt;
            &lt;a id="item-b" class="" data-toggle="collapse" href="#collapseInnerB"&gt;
        Item Two of a list
       &lt;/a&gt;
            &lt;br /&gt;
            &lt;div id="collapseInnerB" class="collapse"&gt;
              &lt;div class="row"&gt;
                &lt;p class="ml-4"&gt;Item Two Related Information&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I click on the items in the list (which is inside the 1st collapse) it causes the parent methods to fire.</p>
  
  <p>How do I prevent the parent methods from firing when I click on the list items to collapse/show their information?</p>
  
  <p>I'm looking to see how I can do this relating to bootstrap specifically.</p>