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

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

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

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