JSFiddle - React, Tailwind, and code Playground

by max3w

HTML

<div align="center"><h4>Оформление заказа</h4></div>
<details class="corz" id="d1" open>
  <summary>1. Контактные данные</summary>
  <p>ФИО <input> и т.д. <input></p>
  <button id="op1">Далее</button>
</details>
<details class="corz" id="d2">
  <summary>2. Доставка</summary>
  <p>Способы доставки 1,2,3</p>
  <button id="op2">Далее</button>
</details>
<details class="corz" id="d3">
  <summary>3. Оплата</summary>
  <p>Детали оплаты</p>
  <button>Заказать</button>
</details>

CSS

summary{pointer-events: none}
.corz {background-color: #f6f6f6;
    padding: 15px;
    line-height: 19px;
    position: relative;
    margin-bottom: 1px;
    font-weight:bold;
    cursor:pointer;}
    .corz:hover {color:#333;}
.corz p {font-weight:normal;}   
.corz button {border-radius: 3px;
    font-size: 15px;
    color: #fff;
    display: block;
    font-weight: 500;
    background-color: #ff2f00;
    border: 1px solid #ff2f00;
    -webkit-transition: .1s;
    transition: .1s;
    padding: 11px 30px;
    cursor:pointer;
    margin:auto;}

JavaScript

//Open
document.querySelector('#op1').onclick = function() {
document.querySelector('#d2').setAttribute("open", true);
document.querySelector('#d1').removeAttribute("open", true);
document.querySelector('#d1 summary').style['pointer-events'] = 'auto';
document.querySelector('#d1').style['color'] = '#55ca53';
}
document.querySelector('#op2').onclick = function() {
document.querySelector('#d3').setAttribute("open", true);
document.querySelector('#d2').removeAttribute("open", true);
document.querySelector('#d2 summary').style['pointer-events'] = 'auto';
document.querySelector('#d2').style['color'] = '#55ca53';
//add clicable
}