Javascript-форум - Появление/исчезание полей по нажатию кнопок

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Появление/исчезание полей по нажатию кнопок (https://javascript.ru/forum/jquery/52095-poyavlenie-ischezanie-polejj-po-nazhatiyu-knopok.html)

Появление/исчезание полей по нажатию кнопок

Всем привет. Прошу помощи в реализации функционала для сайта.

Столкнулся с необходимостью реализации двух кнопок, нажатие на каждую из которых, вызывает появление формы, соответствующей кнопке. Но при этом форма, вызванная первой кнопкой должна исчезать, когда будет нажата вторая кнопка, и наоборот.

Реализовал только появление обеих форм, по нажатию на каждую из кнопок. Исчезание не получается сделать только по нажатию на ту же кнопку, но такая механика не подходит.

<script>
$(document).ready(function () {
        $('a#easylink').click(function (e) {
            $(this).toggleClass('active');
            $('#easyform').toggle();
                
            e.stopPropagation();
        });

        $('#easyform').click(function (e) {
            e.stopPropagation();
        });

        $('body').click(function () {
            var link = $('a#easylink');
            if (link.hasClass('active')) {
                link.click();
            }
        });
    });


</script>

<a href="#" id="easylink">Получить кредит</a>
<div id="easyform" style="display: none;">Форма Easy</div>

Буду очень благодарен любой помощи. Спасибо зарание.

Sivatsky,
а слабо найти на форуме 10 решений вашей задачи и разместить эти ссылки в этой теме.

Цитата:

Сообщение от рони (Сообщение 344251)

Sivatsky,
а слабо найти на форуме 10 решений вашей задачи и разместить эти ссылки в этой теме.

Честно говоря слабо. Всегда в первую очередь использую поиск и нахожу, что нужно на этом форуме, поэтому и не было необходимости регистрироваться. В этот раз - поиск результатов не дал. Вернее дал, но немного не то, что нужно.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .easyform  {
    display: none;

  }
  .active{
     background: #FF0000;
     color: #FFFF00;
     border-radius: 4px;
     padding: 2px 4px;
     display: inline-block;
  }
  .active + .easyform{
    display: block;
  }
  .easylink {
     cursor: pointer;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $(".easylink");
	   s.click(function(event) {
	     event.preventDefault()
	     s.not(this).removeClass("active");
	     $(this).toggleClass("active");
      });
});
  </script>
</head>

<body>
<a href="#" class="easylink">Получить кредит</a>
<div class="easyform" >Форма Easy</div>
<p></p>
<a href="#" class="easylink">Получить кредит</a>
<div class="easyform" >Форма Easy</div>
</body>

</html>

Могу на js предложить

<html>
<head>
</head>

<body>
<div id="d1" style="display: block">form1 there</div>
<div id="d2" style="display: none">form2 there</div>

<button id="b1">button 1</button>
<button id="b2">button 2</button>

<script>
get=document.querySelector.bind(document)
b1=get("#b1"); b2=get("#b2"); d1=get("#d1"); d2=get("#d2")

f=function(){
   switch (this){
      case b1: d1.style.display="block"; d2.style.display="none"; return
      case b2: d2.style.display="block"; d1.style.display="none"; return
   }
}

b1.onclick=f
b2.onclick=f

</script>
</body>
</html>

Спасибо всем большое.
В том числе за ссылки на уже существующие темы на форуме.
Понял, что при поиске действительно можно было искать различные реализации dropdown'ов.