Trigger a Bootstrap .collapse('toggle') via an event

justSteve picture justSteve · Jun 15, 2013 · Viewed 56.4k times · Source

I have a form that spans several out-of-the-box Bootstrap Collapse panes. They toggle correctly on a mouse click - now I'd like to implement a way to open a closed pane via whatever event fires when tabbing from the last input of the currently open pane.

IOW, as I step thru the input fields of the open pane I can tab from one input to the next - when I tab from the last input the focus goes to the subsequent header region of the next pane. I'd like the act of tabbing to that header region to fire .collapse('toggle');

I've tried a few variations on:

    $('#collapseAcct').focus(function () {
        $('#collapseAcct').collapse('toggle');
    });

and have also tried climbing the family tree with :parent but haven't found the key. Structure of my panes:I'm using 3 panes where the unique identifier is a nested one layer deep in the div structure - pretty much the same as BS's documentation. E.G. struc of 1 pane:

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Account</a>            
        </div>
        <div id="collapseAcct" class="accordion-body collapse">
            <div class="accordion-inner">
            <div>content</div>[and everything wraps out accordingly]

Answer

adeneo picture adeneo · Jun 15, 2013

What about doing it the other way around, and opening the next accordion when the last input in the current accordion blurs :

$('.accordion-inner input:last').on('blur', function() {
    $('#collapseAcct').collapse('show');
});

And you did of course give all the elements unique ID's, and not all collapseAcct