フォームのラジオボタンで選んだ項目によって異なる選択肢をアコーディオン表示する

jQueryを使って表示、非表示の設定をします。

[adsense]

ラジオボタンで選択したものによって、追加で文章やフォームを表示するサンプル

ラジオボタン１

ラジオボタン２

htmlソース

<input type="radio" name="Test" value="ラジオボタン１"/>ラジオボタン１
<div id="rdobtn1">ラジオボタン１を押した時に表示される内容です。<input type="text"></div>
<input type="radio" name="Test" value="ラジオボタン２"/>ラジオボタン２
<div id="rdobtn2">ラジオボタン２を押した時に表示される内容です。<input type="text"></div>

javascriptソース

jQuery(function($) {
    $('input[type=radio]').change(function() {
        $("#rdobtn1").after().hide();
        $("#rdobtn2").after().hide();
  
        if ($("input:radio[name='Test']:checked").val() == "ラジオボタン１") {
            $('#rdobtn1').slideToggle('slow');
            $("#rdobtn2").after().hide();
        } else if($("input:radio[name='Test']:checked").val() == "ラジオボタン２") {
            $('#rdobtn1').after().hide();
            $('#rdobtn2').slideToggle('slow');
        }
    }).trigger('change'); 
});

ソースの説明

radioボタンがチェックされたら、特定のidを持つタグ（div）を表示したり、非表示に戻したりしています。

ワードプレスでjavascriptを使うには

普段、プラグイン「Simple Custom CSS and JS」を使っています。
インストール、js設置方法はこちら