Менять область видимости блока при клике на кнопку

251

01 августа 2021, 15:00

Есть очень длинная форма в модальном окне, разделенная на 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%

Answer 1

Можно реализовать следующим образом: Все секции формы сделать по умолчанию скрытыми (display:none), а первой секции задать класс ".showed" который ее откроет. Пометить кнопки каким-нибудь классом, например ".next", по клику на кнопку подниматься до родительской ноды с классом "form__section", удалять у нее класс ".showed" и добавлять этот класс следующей секции.

Если используете JQuery то можно сделать вот так:

$(function(){ 
  var next = $('.next'); 
  var progress = $('.progress__wrapper-bar'); 
  var stepsCount = $('.form__section').length; 
  var currentStep = 1; 
 
  function calculate(current, total) { // Функция для подсчета текущего % 
     return (current / total) * 100 
  } 
  
  progress.width(calculate(currentStep, stepsCount) + '%'); // устанавливаем начальную ширину полосы 
  next.on('click', function(){ 
    var currentSection = $(this).parents('.form__section'); 
    currentSection.removeClass('form__section_showed'); 
    currentSection.next().addClass('form__section_showed'); 
    progress.width(calculate(++currentStep, stepsCount) + '%') // устанавливаем ширину полосы после изменения шага 
  }); 
});

.form__section { 
  display: none; 
} 
 
.form__section_showed { 
  display: block; 
} 
 
/* progress */ 
 
.progress__wrapper { 
  display: block; 
  width: 100%; 
  background-color: #ccc; 
  margin-bottom: 10px; 
} 
 
.progress__wrapper-bar { 
  height: 5px; 
  width: 0%; 
  background-color: blue; 
  transition: width .5s ease; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form class="form" action=""> 
    <div class="progress"> 
        <div class="progress__wrapper"> 
            <div class="progress__wrapper-bar"></div> 
        </div> 
    </div> 
    <div class="form__section form__section_showed"> 
        <div class="form__content"> 
            <input type="text"> 
            <input type="text"> 
            <input type="text"> 
        </div> 
        <button type="button" class="next">Далее</button> 
    </div> 
    <div class="form__section"> 
        <div class="form__content"> 
            <input type="text"> 
            <input type="text"> 
            <input type="text"> 
        </div> 
        <button type="button" class="next">Далее</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>