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
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();
});

Popular posts from this blog

Aspetcore: NLog with Postgresql

Mongodb Cheatsheet

Installing Windows on Acer chromebook 15 cb3-532