Question

I’ve got the following markup:

<div id="accordion" class="leftaligned">
    <div>
        <h3><a href="#">Stakeholder</a></h3>
        <div>Content</div>
    </div>
    <div>
        <h3><a href="#">Relationships</a></h3>
        <div>Blah blah</div>
    </div>
    <div>
        <h3><a href="#">Address</a></h3>
        <div>Yada yada</div>
    </div>
    <div>
        <h3><a href="#">Contact Details</a></h3>
        <div>Foo bar</div>
    </div>
</div>

I create an accordion as follows:

$("#accordion").accordion({
    header: "h3",
    fillSpace: true,
    changestart: function(event, ui) {
        if (someConditionIsTrue()) {
            event.stopPropagation();
            event.preventDefault();
            return (false);
        }
    }
});

The idea is that there are some use cases which would prevent the user from changing panes, however the above cancelling of the event has no effect and the panes can still be changed.

Is there a way to prevent the changing of panes? I also tried activating the current pane programmatically in order to prevent the change, but that fires another changestart event and all hell breaks loose (the accordion actually breaks)

Answer 1

I found a workaround which works in my context – I avoid having to cancel the event altogether by simply disabling the h3 headers (after giving them an id) when necessary:

html:

<div>
    <h3 id="relationshipsHeader"><a href="#">Relationships</a></h3>
    <div>Blah blah</div>
</div>

script:

if (someConditionIsTrue()) {
    $("#relationshipsHeader").attr("disabled", "disabled");
    // and so on...
}