Откройте и закройте форму с помощью jquery / js

Question

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

HTML формы:

    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          I'm a dropdown button
                        </button>

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" type="button" id="form1btn">form1btn</a>
<a class="dropdown-item" type="button" id="form2btn">form2btn</a>

                        <form id="form1">
                        <div class="form-group">
                          <label for="formGroupExampleInput"> I'm form 1</label>
                          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                        </div>
                        </form>

                        <form id="form2">
                        <div class="form-group">
                          <label for="formGroupExampleInput"> I'm form 2</label>
                          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                        </div>
                        </form>

jquery кнопки и скрыть / показать :

    $('#form1').hide()
$('#form2').hide()
$(document).ready(function(){
    $('#form1btn').click(function(){
    $('#form1').toggle();
    });

$('#form2btn').click(function(){
    $('#form2').toggle();
    });

});

Answer 1

Это должно работать отлично.

$('#form1').hide()
$('#form2').hide()
$(document).ready(function(){
$('#form1btn').click(function(){
$('#form1').toggle();
   $('#form2').hide()
});

$('#form2btn').click(function()
$('#form2').toggle();
 $('#form1').hide()
});

});

Answer 2

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

$(document).ready(function(){
$('#residentialbtn').click(function()
     $('#commercialform').hide()
     $('#corporateform').hide()
    $('#hybridform').hide()
    $('#residentialform').show();
})