Javascript Animate Toggle для 3-х форм

Question

На данный момент у меня есть 2 формы. Форма входа и форма регистрации. Я использую Javascript Toggle для переключения между ними. Но теперь я хочу добавить 3-ую форму. Как я могу это сделать? Поэтому я хочу иметь возможность перейти от формы входа в систему к форме регистрации или к форме забытого пароля, а затем вернуться к форме входа.

Здесь вы видите, как я это сделал сейчас в моем представлении:

(Единственное, что в моих частичных представлениях - это форма с тегом a внизу для активации кода .js)

<div class="login-page">
    <div class="form">
        <!--Login Form-->
        @{await Html.RenderPartialAsync("_LoginView"); }

        <!--Register Form-->
        @{await Html.RenderPartialAsync("_RegisterView"); }

    </div>
</div>

И мой файл .js:

//Toggle between login and registration form
$('.switch a').click(function () {
$('form').animate({ height: "toggle", opacity: "toggle" }, "slow");
});

И код .css:

.register-form {
    display: none;
}

Answer 1

Основываясь на информации, которую я смог получить из вашего вопроса, я думаю, что вы намерены оживить переключение между несколькими формами.Для этого потребуется немного больше логики, написанной на вашем JavaScript.

Основываясь на уже использованном вами механизме переключения, я пришел к следующему решению:

$("a[data-toggle]").on("click", function(e) {
  var selector = $(this).data("toggle");
  if ($(selector).css('display') != 'block') {
    $('form').hide();
  }
  $(selector).animate({height: "toggle", opacity: "toggle"}, "slow");
});

.switch a {
  width: 100px;
  height: 20px;
  background: grey;
  text-align: center;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
}

form {
  width: 100px;
  height: 100px;
  display: none;
}

.form1 {
  background: red;
}

.form2 {
  background: blue;
}

.form3 {
  background: green;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"		  
			   crossorigin="anonymous"></script>
<div class="login-page">
  <div class="switch">
    <a data-toggle=".form1">Form1</a>
    <a data-toggle=".form2">Form2</a>
    <a data-toggle=".form3">Form3</a>
  </div>
  <div class="form">
    <form class="form1"></form>
    <form class="form2"></form>
    <form class="form3"></form>
  </div>
</div>

Это эффективный и простой в реализации способ.Вы можете проверить jsFiddle здесь

Answer 2

Вы можете использовать этот простой код:

$(function(){

    $('form').hide();
    $('form').first().show();
    //Toggle between login and registration form
    $('a.switch').on('click', function () {

        var visibleForm = $('form:visible');

        $(visibleForm).hide();

        if($(visibleForm).next().length > 0)
        {            
            $(visibleForm).next().animate({height: "toggle", opacity: "toggle"}, "slow");
        }
        else
        {
            $(visibleForm).siblings('form:first').animate({height: "toggle", opacity: "toggle"}, "slow");
        }

    });
});    

и это HTML:

<div class="login-page">
    <div class="form">
        <!--Login Form-->
        @{await Html.RenderPartialAsync("_LoginView"); }

        <!--Register Form-->
        @{await Html.RenderPartialAsync("_RegisterView"); }


        <!--Another Form-->
        ...
        <!--Another Form-->
        ...
        <!--Another Form-->
        ...
        <!--Another Form-->
        ...
        <!--Another Form-->
        ...
        <!--Another Form-->
        ...

    </div>
</div>
<a href='#' class='switch'>Switch</a>

Answer 3

Лучший способ переключения между несколькими элементами заключается в следующем:

У активного элемента есть класс acive (is-active), все остальные элементы скрыты с помощью css.

Когда кто-тонажмите «Показать форму 1», затем удалите все активные классы и добавьте его только в форму-1.

Для анимации используйте CSS-переходы.

function hideAllForms() {
  $('.form').removeClass('is-active');
}

$('.js-show-form').on('click', (event) => {
    const $el = $(event.currentTarget);
    
   hideAllForms();
   
   $('#form-' + $el.data('form')).addClass('is-active');
});

.form { display:none; background-color: red; }
.form.is-active { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <form id="form-1" class="form is-active">form1</form>
   <form id="form-2" class="form" >form2</form>
   <form id="form-3" class="form" >form3</form>
</div>

<a class="js-show-form" data-form="1">show form 1</a><br />
<a class="js-show-form" data-form="2">show form 2</a><br />
<a class="js-show-form" data-form="3">show form 3</a><br />