JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div id="stage" class="stage-shipping">
  <p class="stage-title stage-title-shipping" aria-hidden="true">Livraison</p>
  <p class="stage-title stage-title-payment" aria-hidden="true">Paiement</p>

  <div class="stage-section stage-section-shipping">
    <h1 class="visually-hidden">Livraison</h1>
    <p>Choisissez votre mode de livraison</p>
    ...
  </div>

  <div class="stage-section stage-section-payment">
    <h1 class="visually-hidden">Paiement</h1>
    <p>Renseignez vos informations de paiement</p>
    ...
  </div>
  <button id="next" type="button">Étape suivante</button>
</div>

SCSS

body {
  margin: 1rem;
}

.visually-hidden {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  opacity: 0.001;
}

.stage-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.stage-section {
  margin-bottom: 1rem;
  padding: 2rem;
  border: 1px solid grey;
}

.stage-shipping {

  .stage-title-payment,
  .stage-section-payment {
    display: none;
  }
}

.stage-payment {

  .stage-title-shipping,
  .stage-section-shipping,
  button {
    display: none;
  }

  .stage-title-payment,
  .stage-section-payment {
    display: block;
  }
}

JavaScript

var stage = document.getElementById("stage");
var el = document.getElementById("next");
el.addEventListener("click", function() {
	stage.classList.remove('stage-shipping');
	stage.classList.add('stage-payment');
}, false);