Bootstrapを使用したラジオボタンアコーディオンの作成方法

まず、Bootstrapをプロジェクトに追加しましょう。CDNを使用するか、ダウンロードしてローカルに保存する方法があります。

次に、HTMLマークアップを作成します。基本的な構造は以下のようになります:

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        ラジオボタン1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        ここにコンテンツを追加します。
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        ラジオボタン2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        別のコンテンツをここに追加します。
      </div>
    </div>
  </div>
</div>

この例では、2つのラジオボタンがあります。最初のラジオボタンは展開された状態で表示され、2番目のラジオボタンは折りたたまれた状態で表示されます。

上記のコードでは、Bootstrapのクラスとデータ属性を使用して、アコーディオンの動作を設定しています。各ラジオボタンはaccordion-itemクラスで囲まれ、ヘッダーとコンテンツのセクションを含んでいます。ヘッダーのボタンにはaccordion-buttonクラスがあり、コンテンツのセクションにはaccordion-collapseクラスがあります。

また、data-bs-toggle属性とdata-bs-target属性を使用して、ボタンがクリックされたときにコンテンツの表示/非表示を切り替えるように設定しています。

必要に応じて、他のラジオボタンやコンテンツを追加することもできます。さらに、Bootstrapのスタイルやカスタマイズオプションを使用して、アコーディオンの外観を変更することもできます。

以上が、Bootstrapを使用してラジオボタンアコーディオンを作成する方法の概要です。必要に応じて、上記のコード例をカスタマイズして自分のプロジェクトに組み込んでください。