JSFiddle - React, Tailwind, and code Playground

by Geoffrey Gazet

HTML

<div id="accordeon">
    <h3>Informations d'inscription</h3>
        <fieldset>
        bla bla bla
        <input type="button" id="0"  value="Suivant"/>
        </fieldset>
    <h3>2eme élément </h3>
        <fieldset>
        bla bla bla
        <input type="button" id="1" value="Suivant"/>
        </fieldset>
    <h3>3eme élément </h3>
        <fieldset>
        bla bla bla
        <input type="button" id="2" value="Suivant"/>
        </fieldset>
    <h3>4eme élément </h3>
        <fieldset>
        bla bla bla
        <input type="button" id="3" value="Suivant"/>
        </fieldset>
</div>

JavaScript

$(document).ready(function(){
     $("#accordeon").accordion({
        collapsible  : true,
        active       : 0,
        heightStyle  : "content",
        navigation   : true
    }); 
     
     $( "input[type=submit], input[type=button]" )
      .button()
      .click(function() {
         var inputId = $(this).attr("id");
         $(this).addClass("ui-state-disabled"); // rend inacessible l'element en cours 
         var accordeonActive = (parseInt(inputId) +1);
         $("#accordeon").accordion('option', 'active' , accordeonActive); // active l'element suivant
      }); 
 });