jquery ui accordion disabling clicking

Question

I have an accordion set like this

$(".accordion-form").accordion({
    collapsible:false,
    autoHeight: false,
    changestart: checkChanged,
    change: function(e, ui) {active = $( ".accordion-form" ).accordion( "option", "active");},
    active: 0
});

active is a static variable which always have the active content.

What I would like to do is enable headers before the one actived for clicking, and the headers after the active one been disabled for clicking.

This way I can make the accordion act like a form in the way of "you can go back but no forward til your finish this part".

Any help would be appreciated

That would be quite difficult to achieve without depending on the accordion widget's internals (assuming it's even possible without modifying the widget itself). That said, IMHO accordions provide a poor metaphor for sequential steps (they're better suited for parallel alternatives). Might I suggest a [wizard](http://wiki.jqueryui.com/w/page/23314826/Wizard) instead? — Frédéric Hamidi, Jul 23 '11 at 16:27

score 2 · Answer 1 · answered Jul 23 '11 at 17:27

2

While I agree with Frédéric that an accordion isn't a great widget for this sort of behaviour, you should be able to do it with some simple JS. Attach another 'onclick' handler to the accordion headers, and have it kill the event if the header was too far along:

$('.accordion-form .ui-accordion-header').click(function(e) {
    if($(this).index() > current_section.index())
    {
        e.stopImmediatePropagation();
    }
});

That'll need you to have a current_section variable that holds the last section completed (I assume you already have something like this), and make sure this handler gets attached after (or before) the JqueryUI accordion setup, so your handler gets called first.

Hope this helps!

answered Jul 23 '11 at 17:27

Xavier Holt

14,471
4
43
56

In order for `$(".ui-accordion-header")` to match anything, you'll have to wait until *after* `accordion()` is called. Therefore, according to [this question](http://stackoverflow.com/q/2360655/464709), your `click` handler will be called too late (since click handlers are called in the order they were bound), unless you reorder `data("events")` yourself. – Frédéric Hamidi Jul 23 '11 at 18:04
what if I use the changestart function to check the if Xavier is proposing – gvalero87 Jul 23 '11 at 18:10
@gvalero87, [it won't work until jQuery UI 1.9](http://bugs.jqueryui.com/ticket/6651), but there's a workaround [here](http://stackoverflow.com/questions/2004869/jquery-accordion-prevent-pane-from-opening-cancel-changestart-event/2005149#2005149) that might interest you. It seems to be possible after all, I stand corrected :) – Frédéric Hamidi Jul 23 '11 at 18:20
1

@Frédéric, @gvalero87 - Good catch on the JqueryUI class (whoops!). Another workaround would be to mimic the selector that the `.accordion()` function uses to find headers; I think `'.accordion-form > h3'` would cover the default setup. Good luck! – Xavier Holt Jul 23 '11 at 20:00
The answer works for me in conjunction with the link pointed out by @FrédéricHamidi. – Raj Pawan Gumdal Dec 01 '16 at 11:01

score 1 · Answer 2 · answered Apr 30 '18 at 11:18

I found the solution to this problem elsewhere:

// Add the class ui-state-disabled to the headers that you want disabled
$( ".whatyouwantdisabled" ).addClass("ui-state-disabled");

Now the hack to implement the disabling functionality:

// replace the old eventhandler
var accordion = $( "#accordion" ).data("accordion");
accordion._std_clickHandler = accordion._clickHandler;
accordion._clickHandler = function( event, target ) {
 var clicked = $( event.currentTarget || target );
 if (! clicked.hasClass("ui-state-disabled")) this._std_clickHandler(event, target);

Whenever you want to re-activate a tab, do:

// Remove the class ui-state-disabled to the headers that you want to enable
$( ".whatyouwantenabled" ).removeClass("ui-state-disabled");

Source: https://forum.jquery.com/topic/disable-enable-sections-of-accordion

jquery ui accordion disabling clicking

2 Answers2