Prevent panel opening bootstrap3

Question

So theres this Bootstrap3 accordion with consecutive panels. Each one has a button that closes it and opens the next one: the next step, if you will.

However, if (certain conditions not met) the next panel should not open. Other things should also not happen, but they are sort of under control. The point is the next step panel opens if (conditions not met) and I want to prevent that.

I added the following to the event listener, to no avail. What to do to correctly prevent the next panel from opening?

$('#my-panel').on('hidden.bs.collapse', function (aTicketPanelCollapsedEvent) {
    aTicketPanelCollapsedEvent.preventDefault(); 
    // I expected this to work but unfortunately it doesn't
    });

Answer 1

I would try to use either show.bs.collapse or hide.bs.collapse. You're using hidden.bs.collapse which is called after the event has already happened.

Answer 2

I believe preventDefault() only prevents the browser from performing its default action in response to an event. Since the event 'hidden.bs.collapse' is not a browser event, preventDefault() does nothing.

Answer 3

I think you need to handle 'hide.bs.collapse' instead. The problem with using 'hidden' is that is that the collapse has already occurred.

$('#my-panel').on('hide.bs.collapse', function (e) {
    e.preventDefault(); 
});

Demo: http://bootply.com/78023