左坊のメモ帳

WordPress など

*

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

   

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

スポンサーリンク

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

ラジオボタン1

ラジオボタン1を押した時に表示される内容です。

ラジオボタン2

ラジオボタン2を押した時に表示される内容です。

htmlソース

<input type="radio" name="Test" value="ラジオボタン1"/>ラジオボタン1
<div id="rdobtn1">ラジオボタン1を押した時に表示される内容です。<input type="text"></div>
<input type="radio" name="Test" value="ラジオボタン2"/>ラジオボタン2
<div id="rdobtn2">ラジオボタン2を押した時に表示される内容です。<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() == "ラジオボタン1") {
            $('#rdobtn1').slideToggle('slow');
            $("#rdobtn2").after().hide();
        } else if($("input:radio[name='Test']:checked").val() == "ラジオボタン2") {
            $('#rdobtn1').after().hide();
            $('#rdobtn2').slideToggle('slow');
        }
    }).trigger('change'); 
});

ソースの説明

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

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

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

 - CSS・html, WordPress