Есть очень длинная форма в модальном окне, разделенная на 3 части, видимой должна быть только одна из частей, а по клику на кнопку "далее", нужно показывать следующую часть, то есть смещать видимую часть формы. Как такое можно реализовать?
Примерная верстка такая:
<form class="form" action="">
<div class="progress">
<div class="progress__wrapper">
<div class="progress__wrapper-bar"></div>
</div>
</div>
введите сюда код
<div class="form__section">
<div class="form__content">
<input type="text">
<input type="text">
<input type="text">
</div>
<button>Далее</button>
</div>
<div class="form__section">
<div class="form__content">
<input type="text">
<input type="text">
<input type="text">
</div>
<button>Далее</button>
</div>
<div class="form__section">
<div class="form__content">
<input type="text">
<input type="text">
<input type="text">
</div>
</div>
<button type="submit">Submit</button>
</form>
UPD И как можно реализовать строку с прогрессом, чтобы по мере движения по частям формы, менялась процентная ширина у блока progress__wrapper-bar. То есть, исходя из того, что у нас 3 части формы, сначала ширина 33.33%, после нажатия на "далее" - 66.66%, и в конце - 100%