Как сделать Аккордеон для скольжения следующих шагов - PullRequest
Новая
       1

Как сделать Аккордеон для скольжения следующих шагов

0 голосов
/ 26 февраля 2020

Я пытаюсь запустить этот Аккордеон, чтобы при заполнении ввода и нажатии кнопки закрыть предыдущий шаг и перейти к следующему шагу ... а также нажать предыдущую кнопку, чтобы закрыть активный шаг и go к предыдущему шагу.

Я пытался как-то соединить его, но после нажатия не было никаких действий

Заранее благодарю за помощь. 

var accordion = (function() {

  var $accordion = $('.loanForm-js');
  var $accordion_header = $accordion.find('.loanForm-header-js');
  var $accordion_item = $('.loanForm-item-js');

  // default settings
  var settings = {
    // animation speed
    speed: 400,
    // close all other accordion items if true
    oneOpen: false
  };

  return {
    // pass configurable object literal
    init: function($settings) {
      $accordion_header.on('click', function() {
        accordion.toggle($(this));
      });
      $.extend(settings, $settings);
      // ensure only one accordion is active if oneOpen is true
      if (settings.oneOpen && $('.loanForm-item-js.active').length > 1) {
        $('.loanForm-item-js.active:not(:first)').removeClass('active');
      }
      // reveal the active accordion bodies
      $('.loanForm-item-js.active').find('> .loanForm-body-js').show();
    },

    toggle: function($this) {
      if (settings.oneOpen && $this[0] != $this.closest('.loanForm-js').find('> .loanForm-item-js.active > .loanForm-header-js')[0]) {
        $this.closest('.loanForm-js')
          .find('> .loanForm-item-js')
          .removeClass('active')
          .find('.loanForm-body-js')
          .slideUp()
      }
      // show/hide the clicked accordion item
      $this.closest('.loanForm-item-js').toggleClass('active');
      $this.next().stop().slideToggle(settings.speed);

    }
  }
})();

$(document).ready(function() {
  accordion.init({
    speed: 300,
    oneOpen: true
  });
});
.loanForm-wrapper {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.loanForm-form-content {
  width: 70%;
  position: relative;
}

.loanForm-details-content {
  width: 30%;
  position: relative;
}

.loanForm-position-absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.loanForm-position-fixed {
  width: 330px;
  position: fixed;
  padding: 0;
  display: flex;
  z-index: 100;
  flex-direction: column;
}

.loanForm-details-box {
  width: 100%;
  padding: 10px;
  margin: 0;
  background: orange;
}

.loanForm-details-info {
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
}

.loanForm {
  font-size: 16px;
  width: 100%;
}

.loanForm-header,
.loanForm-body {
  background: white;
}

.loanForm-header {
  padding: 1.5em 1.5em;
  background: #fdd365;
  color: #353353;
  /*cursor: pointer;*/
  font-size: .7em;
  letter-spacing: .1em;
  transition: all .3s;
  text-transform: uppercase;
}

.loanForm-item .loanForm-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}


/*.loanForm-item.active .loanForm-header:hover {
  background: #2D3D99;
  position: relative;
  z-index: 5;
  cursor: pointer;
}

.loanForm-header:hover {
  background: #2D3D99;
  position: relative;
  z-index: 5;
}
 */

.loanForm-body {
  background: #F9F9FF;
  color: #353353;
  display: none;
}

.loanForm-form {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.loanForm-item.active:last-child .loanForm-header {
  border-radius: none;
}

.loanForm:first-child>.loanForm-item>.loanForm-header {
  border-bottom: 1px solid transparent;
}

.icon::after {
  display: none;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.loanForm-item>.loanForm-header::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-size: 1.2em;
  transform: rotate(0deg);
  transition: .3s all;
  position: relative;
  top: -2px;
}

.fa-f077,
.fa-f078 {
  float: right;
}


/*
chevron up: f077;
chevron down: f078;
 */

.loanForm-item.active>.loanForm-header::after {
  content: "\f077";
  font-family: "Font Awesome 5 Free";
  transform: rotate(-180deg);
}

.loanForm-item.active .loanForm-header {
  background: #FF4C60;
  color: #F9F9FF;
}

.loanForm-item.activated .loanForm-header {
  background: #9de3d0;
  color: #353353;
}

.loanForm-item {
  border-bottom: 1px solid #dabd44;
}

.loanForm-item.active {
  border-bottom: 1px solid transparent;
}

.loanForm-item.activated {
  border-bottom: 1px solid #85c9b6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <div class="loanForm loanForm-js">

    <div class="loanForm-item loanForm-item-js active">
      <div class="icon loanForm-header loanForm-header-js">Create Account</div>
      <div class="loanForm-body loanForm-body-js">
        <div class="loanForm-form">
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control">
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="password">Password</label>
              <input type="password" class="form-control">
            </div>
            <div class="form-group col-md-6">
              <label for="confirm-password">Confirm password</label>
              <input type="password" class="form-control">
            </div>
          </div>
          <div class="form-group text-right">
            <button type="button" class="loanForm-next btn btn-default">Next</button>
          </div>
        </div>
      </div>
    </div>

    <div class="loanForm-item loanForm-item-js">
      <div class="icon loanForm-header loanForm-header-js">Personal information</div>
      <div class="loanForm-body loanForm-body-js">
        <div class="loanForm-form">
          FORM INPUT HERE
          <div class="form-row">
            <div class="form-group col-md-6 text-left">
              <button type="button" class="loanForm-prev btn btn-default">Prev</button>
            </div>
            <div class="form-group col-md-6 text-right">
              <button type="button" class="loanForm-next btn btn-default">Next</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="loanForm-item loanForm-item-js">
      <div class="icon loanForm-header loanForm-header-js">Adress</div>
      <div class="loanForm-body loanForm-body-js">
        <div class="loanForm-form">
          FORM INPUT HERE
          <div class="form-row">
            <div class="form-group col-md-6 text-left">
              <button type="button" class="loanForm-prev btn btn-default">Prev</button>
            </div>
            <div class="form-group col-md-6 text-right">
              <button type="button" class="loanForm-next btn btn-default">Next</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="loanForm-item loanForm-item-js">
      <div class="icon loanForm-header loanForm-header-js">Employment and income</div>
      <div class="loanForm-body loanForm-body-js">
        <div class="loanForm-form">
          FORM INPUT HERE
          <div class="form-row">
            <div class="form-group col-md-6 text-left">
              <button type="button" class="loanForm-prev btn btn-default">Prev</button>
            </div>
            <div class="form-group col-md-6 text-right">
              <button type="button" class="loanForm-next btn btn-default">Next</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="loanForm-item loanForm-item-js">
      <div class="icon loanForm-header loanForm-header-js">Documents and Consents</div>
      <div class="loanForm-body loanForm-body-js">
        <div class="loanForm-form">
          FORM INPUT HERE
          <div class="form-row">
            <div class="form-group col-md-6 text-left">
              <button type="button" class="loanForm-prev btn btn-default">Prev</button>
            </div>
            <div class="form-group col-md-6 text-right">
              <button type="button" class="loanForm-next btn btn-default">Next</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="loanForm-item loanForm-item-js">
      <div class="icon loanForm-header loanForm-header-js">Summarization</div>
      <div class="loanForm-body loanForm-body-js">
        <div class="loanForm-form">
          FORM INPUT HERE
          <div class="form-row">
            <div class="form-group col-md-6 text-left">
              <button type="button" class="loanForm-prev btn btn-default">Prev</button>
            </div>
            <div class="form-group col-md-6 text-right">
              <button type="button" class="loanForm-send btn btn-default">Send</button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</form>

1 Ответ

1 голос
/ 26 февраля 2020

Здесь вы go .. Вам нужно включить две функции для next и prev нажатия кнопки и найти ближайший следующий и предыдущий элемент, используя,

Для next элемент с классом loanForm-item-js

$(this).closest('.loanForm-item-js').nextAll('.loanForm-item-js:first')

Для предыдущий элемент с классом loanForm-item-js

$(this).closest('.loanForm-item-js').prevAll('.loanForm-item-js:first')

Добавлены две функции для следующего и предыдущего клика соответственно, как , 

$('.loanForm-next').on('click', function() { ... })

$('.loanForm-prev').on('click', function() { ... })

Фрагмент работы следующим образом, 

var accordion = (function() {

  var $accordion = $('.loanForm-js');
  var $accordion_header = $accordion.find('.loanForm-header-js');
  var $accordion_item = $('.loanForm-item-js');

  // default settings
  var settings = {
    // animation speed
    speed: 400,
    // close all other accordion items if true
    oneOpen: false
  };

  return {
    // pass configurable object literal
    init: function($settings) {
      $accordion_header.on('click', function() {
        accordion.toggle($(this));
      });
      
      $('.loanForm-next').on('click', function() {
        // accordion.toggle($(this));
        $(this).closest('.loanForm-js')
          .find('> .loanForm-item-js')
          .removeClass('active')
          .find('.loanForm-body-js')
          .slideUp()
        $(this).closest('.loanForm-item-js').nextAll('.loanForm-item-js:first').toggleClass('active')
        console.log();
        $(this).closest('.loanForm-item-js').nextAll('.loanForm-item-js:first').find('.loanForm-body-js').stop().slideToggle(settings.speed);
      });
      
      $('.loanForm-prev').on('click', function() {
        // accordion.toggle($(this));
        $(this).closest('.loanForm-js')
          .find('> .loanForm-item-js')
          .removeClass('active')
          .find('.loanForm-body-js')
          .slideUp()
        $(this).closest('.loanForm-item-js').prevAll('.loanForm-item-js:first').toggleClass('active')
        $(this).closest('.loanForm-item-js').prevAll('.loanForm-item-js:first').find('.loanForm-body-js').stop().slideToggle(settings.speed);
      });
      
      $.extend(settings, $settings);
      // ensure only one accordion is active if oneOpen is true
      if (settings.oneOpen && $('.loanForm-item-js.active').length > 1) {
        $('.loanForm-item-js.active:not(:first)').removeClass('active');
      }
      // reveal the active accordion bodies
      $('.loanForm-item-js.active').find('> .loanForm-body-js').show();
    },

    toggle: function($this) {
      if (settings.oneOpen && $this[0] != $this.closest('.loanForm-js').find('> .loanForm-item-js.active > .loanForm-header-js')[0]) {
        $this.closest('.loanForm-js')
          .find('> .loanForm-item-js')
          .removeClass('active')
          .find('.loanForm-body-js')
          .slideUp()
      }

      $this.closest('.loanForm-item-js').toggleClass('active');
      console.log($this.next());
      $this.next().stop().slideToggle(settings.speed);

    }
  }
})();

$(document).ready(function() {
  accordion.init({
    speed: 300,
    oneOpen: true
  });
});
.loanForm-wrapper {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.loanForm-form-content {
  width: 70%;
  position: relative;
}

.loanForm-details-content {
  width: 30%;
  position: relative;
}

.loanForm-position-absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.loanForm-position-fixed {
  width: 330px;
  position: fixed;
  padding: 0;
  display: flex;
  z-index: 100;
  flex-direction: column;
}

.loanForm-details-box {
  width: 100%;
  padding: 10px;
  margin: 0;
  background: orange;
}

.loanForm-details-info {
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
}

.loanForm {
  font-size: 16px;
  width: 100%;
}

.loanForm-header,
.loanForm-body {
  background: white;
}

.loanForm-header {
  padding: 1.5em 1.5em;
  background: #fdd365;
  color: #353353;
  /*cursor: pointer;*/
  font-size: .7em;
  letter-spacing: .1em;
  transition: all .3s;
  text-transform: uppercase;
}

.loanForm-item .loanForm-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}


/*.loanForm-item.active .loanForm-header:hover {
  background: #2D3D99;
  position: relative;
  z-index: 5;
  cursor: pointer;
}

.loanForm-header:hover {
  background: #2D3D99;
  position: relative;
  z-index: 5;
}
 */

.loanForm-body {
  background: #F9F9FF;
  color: #353353;
  display: none;
}

.loanForm-form {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.loanForm-item.active:last-child .loanForm-header {
  border-radius: none;
}

.loanForm:first-child>.loanForm-item>.loanForm-header {
  border-bottom: 1px solid transparent;
}

.icon::after {
  display: none;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.loanForm-item>.loanForm-header::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-size: 1.2em;
  transform: rotate(0deg);
  transition: .3s all;
  position: relative;
  top: -2px;
}

.fa-f077,
.fa-f078 {
  float: right;
}


/*
chevron up: f077;
chevron down: f078;
 */

.loanForm-item.active>.loanForm-header::after {
  content: "\f077";
  font-family: "Font Awesome 5 Free";
  transform: rotate(-180deg);
}

.loanForm-item.active .loanForm-header {
  background: #FF4C60;
  color: #F9F9FF;
}

.loanForm-item.activated .loanForm-header {
  background: #9de3d0;
  color: #353353;
}

.loanForm-item {
  border-bottom: 1px solid #dabd44;
}

.loanForm-item.active {
  border-bottom: 1px solid transparent;
}

.loanForm-item.activated {
  border-bottom: 1px solid #85c9b6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <form action="#">
                        <div class="loanForm loanForm-js">

                            <div class="loanForm-item loanForm-item-js active">
                                <div class="icon loanForm-header loanForm-header-js">Create Account</div>
                                <div class="loanForm-body loanForm-body-js">
                                    <div class="loanForm-form">
                                        <div class="form-group">
                                            <label for="email">Email</label>
                                            <input type="email" class="form-control">
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="password">Password</label>
                                                <input type="password" class="form-control">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="confirm-password">Confirm password</label>
                                                <input type="password" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group text-right">
                                            <button type="button" class="loanForm-next btn btn-default">Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="loanForm-item loanForm-item-js">
                                <div class="icon loanForm-header loanForm-header-js">Personal information</div>
                                <div class="loanForm-body loanForm-body-js">
                                    <div class="loanForm-form">
                                        FORM INPUT HERE
                                        <div class="form-row">
                                            <div class="form-group col-md-6 text-left">
                                                <button type="button" class="loanForm-prev btn btn-default">Prev</button>
                                            </div>
                                            <div class="form-group col-md-6 text-right">
                                                <button type="button" class="loanForm-next btn btn-default">Next</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="loanForm-item loanForm-item-js">
                                <div class="icon loanForm-header loanForm-header-js">Adress</div>
                                <div class="loanForm-body loanForm-body-js">
                                    <div class="loanForm-form">
                                        FORM INPUT HERE
                                        <div class="form-row">
                                            <div class="form-group col-md-6 text-left">
                                                <button type="button" class="loanForm-prev btn btn-default">Prev</button>
                                            </div>
                                            <div class="form-group col-md-6 text-right">
                                                <button type="button" class="loanForm-next btn btn-default">Next</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="loanForm-item loanForm-item-js">
                                <div class="icon loanForm-header loanForm-header-js">Employment and income</div>
                                <div class="loanForm-body loanForm-body-js">
                                    <div class="loanForm-form">
                                        FORM INPUT HERE
                                        <div class="form-row">
                                            <div class="form-group col-md-6 text-left">
                                                <button type="button" class="loanForm-prev btn btn-default">Prev</button>
                                            </div>
                                            <div class="form-group col-md-6 text-right">
                                                <button type="button" class="loanForm-next btn btn-default">Next</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="loanForm-item loanForm-item-js">
                                <div class="icon loanForm-header loanForm-header-js">Documents and Consents</div>
                                <div class="loanForm-body loanForm-body-js">
                                    <div class="loanForm-form">
                                        FORM INPUT HERE
                                        <div class="form-row">
                                            <div class="form-group col-md-6 text-left">
                                                <button type="button" class="loanForm-prev btn btn-default">Prev</button>
                                            </div>
                                            <div class="form-group col-md-6 text-right">
                                                <button type="button" class="loanForm-next btn btn-default">Next</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="loanForm-item loanForm-item-js">
                                <div class="icon loanForm-header loanForm-header-js">Summarization</div>
                                <div class="loanForm-body loanForm-body-js">
                                    <div class="loanForm-form">
                                        FORM INPUT HERE
                                        <div class="form-row">
                                            <div class="form-group col-md-6 text-left">
                                                <button type="button" class="loanForm-prev btn btn-default">Prev</button>
                                            </div>
                                            <div class="form-group col-md-6 text-right">
                                                <button type="button" class="loanForm-send btn btn-default">Send</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>

Рабочий код здесь ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...