Javascript

Открытие дополнительных полей по клику на кнопку

Открытие дополнительных полей по клику на кнопкуНемного кода для добавления функционала открытия дополнительных полей в форме по клику на кнопку, как изображено на рисунке. Т. е. по клику на кнопку "Добавить участника" открывается пара полей "ФИО-Должность". Количество пар обозначено заранее в верстке.

Верстка:

   <div class="fio_pos">
      <label class="group-header">Участники</label>
      <div class="flexbox-cols row"></div>
      <div class="flexbox-cols row"></div>
      <div class="flexbox-cols row"></div>
      <input type="button" class="btn btn-link btn-ownerc-link js-add-participants" value="+ Добавить участника">
   </div>

Стили CSS:

.flexbox-cols {
      display: none;
}
.fio_pos .flexbox-cols:nth-of-type(1) {
      display: block;
}

И непосредственно сам скрипт, отвечающий за вставку дополнительных полей. Используется библиотека jQuery:

$('.js-add-participants').on('click', function() {
   var $container = $(this).parent();
   var $flexboxCols = $(this).siblings(".fio_pos .flexbox-cols:last");
   var $siblings_cnt = $container.children(".flexbox-cols").length;
   $flexboxCols.removeClass("flexbox-cols");
   $flexboxCols.addClass('show');
   $flexboxCols.detach();
    $flexboxCols.insertBefore(this);
   if($siblings_cnt == 2) {
       $(this).remove();
   }
});

сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей