JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<form class="MultiForm">
  
  <fieldset class="Tab">
    <legend>Formbereich 1</legend>
    <input />
  </fieldset>

  <fieldset class="Tab">
    <legend>Formbereich 2</legend>
    <input />
  </fieldset>

  <fieldset class="Tab">
    <legend>Formbereich 3</legend>
      <select></select>
   </fieldset>
  
</form>

CSS

.Button {
  cursor:pointer;
  text-decoration:underline;
  padding-right:10px;
}
.Tab {
  display:none;
}
.Tab.active {
  display:block;
}

JavaScript

$(function() {

  var multiForm = function (jElement) {
  
    this.tabs    = [];
    this.currentItem = 0;
    this.maxItems    = 0;
    
    var that = this;
    
    this.refresh = function () {
      that.tabs.removeClass ('active');
      that.tabs.eq (that.currentItem).addClass ('active');
    };

    this.skipPrev = function () {
      that.currentItem = Math.max (that.currentItem - 1 , 0);

      that.refresh ();
    };

      
     this.skipNext = function () {
       that.currentItem = Math.min (that.currentItem + 1 , that.maxItems - 1);

       that.refresh ();
     };
 
    this.init = function () {
      this.tabs     = $('.Tab' , jElement);
      this.maxItems = this.tabs.length;
      
      this.refresh();
        
      var prevButton = $('<span class="Button">zurück</span>');
      prevButton.click (that.skipPrev);
      var nextButton = $('<span class="Button">weiter</span>');
      nextButton.click (that.skipNext);
      
      jElement.append (prevButton);
      jElement.append (nextButton);
        
    };
    
    this.init ();
  }
  
  var mf = new multiForm ($('.MultiForm'));
  
});