Trigger a Bootstrap .collapse('toggle') vi

Question

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 1

This should get you started: http://jsfiddle.net/Xbg4n/45/

The example doesn't use .collapse, but just .slideUp and .slideDown... should be easy enough to swap out with collapse but works for example purposes. What you are really getting out of this is the targeting, which I think is what you were mainly asking about. I also added a bit into this to cycle back to the first container, but stopped there. You should add better control over focus (avoid focus on anchor tags and force focus when cycling back to first container).

You didn't provide full HTML sample code, so I filled in the blanks:

<form id="myform">
<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="collapseAcct1" class="accordion-body collapse">
        <div class="accordion-inner">
            <div>
                <input type="text" name="input1" />
                <input type="text" name="input11" />
                <input type="text" name="input12" />
            </div>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Settings</a> 
    </div>
    <div id="collapseAcct3" class="accordion-body collapse">
        <div class="accordion-inner">
            <div>
                <input type="text" name="input3" />
                <input type="text" name="input31" />
                <input type="text" name="input32" />
            </div>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Prefs</a> 
    </div>
    <div id="collapseAcct2" class="accordion-body collapse">
        <div class="accordion-inner">
            <div>
                <input type="text" name="input2" />
                <input type="text" name="input21" />
                <input type="text" name="input22" />
            </div>
        </div>
    </div>
</div>

the JS:

$('.accordion-group').each(function(){
var topcontainer = $(this);
topcontainer.find('input:last').each(function(){
    $(this).blur(function(){
        //swap slideup and slidedown for 'collapse' as appropriate
        var nextag = topcontainer.next('.accordion-group');
        var lastag = $('.accordion-group').last();
        if(topcontainer.is(lastag)){
            var nextag = $('.accordion-group').first();
        }
        var showag = nextag.find('.collapse');
        var hideag = topcontainer.find('.collapse');
        showag.slideDown();
        hideag.slideUp();
    });
});

});

The CSS:

#collapseAcct2 {
    display:none;
}
#collapseAcct3 {
    display:none;
}

Answer 2

I had a situation where needed to make bootstrap panels behave like a form so open on focus or mouseover.

I just triggered the click event.

code:

$('.panel-title a').bind('mouseover focus',function(){
$(this).trigger('click');
});

Answer 3

You can use bootstrap collapse events

show.bs.collapse

This event fires immediately when the show instance method is called.

shown.bs.collapse   

This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).

hide.bs.collapse

This event is fired immediately when the hide method has been called.

hidden.bs.collapse 

This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). Copy

example:

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Answer 4

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