Accordéon : Dans les deux sens

Reprenons l'exemple précédent et ajoutons une fonctionnalité pour obtenir un CFFORMGROUP type="accordion" ne pouvant être parcouru qu'en suivant la suite logique des pages (ou niveaux si vous préférez). Mais cette fois avec une navigation possible dans les deux sens.

Cela nous donne...

<cfform name="test" format="Flash">
<cfformgroup type="accordion" visible="yes" enabled="yes" id="a1" onchange="for(var i=a1.selectedIndex+1; i<4 ; i++){a1.getHeaderAt(i).enabled=false;}">

<cfformgroup type="PAGE" label="Etape 1">
<cfformitem type="text"> Texte 1 </cfformitem>
<cfinput type="button" name="suivant0" value="Etape suivante..." onClick="a1.selectedIndex=a1.selectedIndex+1;a1.getHeaderAt(0).enabled=false;a1.getHeaderAt(1).enabled=true">
</cfformgroup>

<cfformgroup type="PAGE" label="Etape 2">
<cfformitem type="text"> Texte 2 </cfformitem>
<cfinput type="button" name="retour1" value="Retour" onClick="a1.selectedIndex=a1.selectedIndex-1;a1.getHeaderAt(0).enabled=true">
<cfinput type="button" name="suivant1" value="Etape suivante..." onClick="a1.selectedIndex=a1.selectedIndex+1;a1.getHeaderAt(1).enabled=false;a1.getHeaderAt(2).enabled=true">
</cfformgroup>

<cfformgroup type="PAGE" label="Etape 3">
<cfformitem type="text"> Texte 3 </cfformitem>
<cfinput type="button" name="retour2" value="Retour" onClick="a1.selectedIndex=a1.selectedIndex-1;a1.getHeaderAt(1).enabled=true">
<cfinput type="button" name="suivant2" value="Etape suivante..." onClick="a1.selectedIndex=a1.selectedIndex+1;a1.getHeaderAt(2).enabled=false;a1.getHeaderAt(3).enabled=true">
</cfformgroup>

<cfformgroup type="PAGE" label="Etape 4">
<cfformitem type="text"> Texte 4 </cfformitem>
<cfinput type="button" name="retour3" value="Retour" onClick="a1.selectedIndex=a1.selectedIndex-1;a1.getHeaderAt(2).enabled=true">
</cfformgroup>
</cfformgroup>
</cfform>

N'oubliez pas la boucle qui se trouve dans l'attribut "onChange" du CFFORM.