示されているように、カテゴリ ドロップダウン リストを使用してみることができます。

HTML コード

落ちる

<select id="category">
   <option value="#form1">Category 1</option>
   <option value="#form2">Category 2</option>
   <option value="#form3">Category 3</option>
</select>

フォーム

<form id="form1">
</form>    

<form id="form2">
</form>

<form id="form3">
</form>

jQuery コード

$(function(){
    var forms = $('form'); //cache all Forms
    forms.hide(); //hide initial

    $('#category').on('change', function(){
        forms.hide();                 //on change hide all forms
        var formId = $(this).val();   //get form id to show
        $(formId).show();    //find form by its id in cached forms and show.
    });

});

jQuerytoggle()関数を使用できます：

$('#your_form').toggle();

ドキュメントから：

一致した要素は、CSS 表示プロパティを変更することにより、アニメーションなしですぐに表示または非表示になります。要素が最初に表示されている場合は、非表示になります。非表示の場合は表示されます。表示プロパティは、必要に応じて保存および復元されます。要素の表示値が inline の場合、非表示にしてから表示すると、再びインラインで表示されます。

jQueryの show()およびhide()関数を使用できます。

例：

$('#form1').hide();
$('#form2').hide();
$('#form3').show();

この例では、フォームを次のように定義しています。

<form id="form1">...</form>
<form id="form2">...</form>
<form id="form3">...</form>

いくつかの効果が必要な場合は、それに夢中になり、 fadeIn()とfadeOut( )を使用することもできます。