jQuery UI手风琴-启用一些面板

Question

I've got this kind of wizard. I wish it to be openable only the panels upwards (to turn back) and not those downwards.

For example: I am filling out the step1, go to step 2, I can not be able to jump to step 4 or 5, but I have to be able to go back to step 1

This is my code:

<div id="accordion">
<h3>Step 1</h3>
<div id="img_divisione">
    <a href="">Something</a>
</div>
<h3>Step 2</h3>
<div>
    <a href="">Something</a>
</div>
<h3>Step 3</h3>
<div>
    <a href="">Something</a>
</div>
<h3>Step 4</h3>
<div>
    <a href="">Something</a>
</div>

$(document).ready(function() {
$("#img_divisione a").click(function() {
   $("#accordion").accordion( "option", "active", 1 );
});
});

$(function() {
   $( "#accordion" ).accordion({
        heightStyle: "content"
});
});   

Answer 1

Have a look at the

beforeActivate: function( event, ui ) {}

event of jQuery-ui.

Here is an example from the jQuery UI homepage:

$( "#accordion" ).accordion({    
        beforeActivate: function( event, ui ) {
                          if ( ui.newHeader.text() === "Don'tActivateMe" ){
                                 event.preventDefault();        
                           }    
                        }
 });

This event can be canceled. So give each of the Panels a class or something to define their order, than check if the ui.newPanel class is greater than the old one. If so, cancel the event.

Be aware that tihs work only from JQuery UI Versions > 1.9.

Hope this helps