I have come across some similar answers, but they all pertain to accordions, which I am not utilizing in this case.
In my code, I have nested collapse items. You can view the code snippet here on CodePen
$('#collapseOutter').on('show.bs.collapse', function(event) {
$('#collapseBtn').html("Show Less");
console.log('This only occurs when the outer div is opened');
event.stopPropagation();
console.log('Even with stopping propagation, it still fires');
})
$('#collapseOutter').on('hide.bs.collapse', function() {
$('#collapseBtn').html("Show More");
console.log('This only happens when the outer div is collapsed');
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row ml-4">
<div class="row header-div">
<a id="collapseBtn" class="btn-info btn" data-toggle="collapse" href="#collapseOutter" role="button" aria-expanded="false" aria-controls="collapseOutter">
Show More
</a>
</div>
</div>
<div class="row ml-4">
<div id="collapseOutter" class="collapse">
<p>Here is a paragraph about the data you're about to see.</p>
<div class="row">
<div id="item-a">
<a id="item-a" class="" data-toggle="collapse" href="#collapseInnerA">
Item One of a list
</a>
<br />
<div id="collapseInnerA" class="collapse">
<div class="row">
<p class="ml-4">Item One Related Information</p>
</div>
</div>
</div>
</div>
<div class="row">
<div id="item-b">
<a id="item-b" class="" data-toggle="collapse" href="#collapseInnerB">
Item Two of a list
</a>
<br />
<div id="collapseInnerB" class="collapse">
<div class="row">
<p class="ml-4">Item Two Related Information</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Whenever I click on the list items inside the first collapse, it triggers the parent methods. How can I prevent this from happening and specifically handle it within Bootstrap?