Bootstrap3 - Radio Nested/Collapsible
Last year I create a login page which I'm very happy to say I built it just how I wanted it. A rare thing if you've ever had to deal with management. Since the page only existed within sharepoint I want to keep things simple. So I went with jquery 2.x and bootstrap 3.3.7. Oldies But Goldies; so a few things I didn't want to create a lot of jquery code. So I had to really use the bootstrap collapsible component as much as I could without breaking it.
Examples
Disable collapse for link in a data-toggle element
Examples
Disable collapse for link in a data-toggle element
You need to add a class for those elements that you don't want to fire the collapse event and then stop the event propagation via javascript. So... here is the correct answer.
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" data-toggle="collapse" href="#collapseOne">
<a href="#">1) collapsing link</a>
<a href="#" class="no-collapsable">2) not collapsing link</a>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche ...</div>
</div>
</div>
Stop the event propagation like this:
$('.no-collapsable').on('click', function (e) {
e.stopPropagation();
});