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]
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