Ruby on RailsでWebサイト公開！に挑戦中

AngularJSをBootstrap3を使ってAccordionを作成してみました。

下記サイトのコンポーネントを使用しています。
http://angular-ui.github.io/bootstrap/#/top
Rails環境への導入方法はこちら

下記サンプルコードで示すように、AngularJSの<accordion>ディレクティブと<accordion-group heading=･･･>ディレクティブを使ってシンプルに記述する事が出来ます。

AngularJSのサイト全体としての初期設定は必要ですが、下記accordionにサンプルコードについては別途AngularJSスクリプトを記述する必要はありません。

ネストさせる事も簡単に出来ます。

●サンプルコード

<accordion>
  <accordion-group heading="大項目１">
    大項目１の内容
  </accordion-group>
  <accordion-group heading="大項目２">
    <accordion>
      <accordion-group heading="中項目１">
        中項目１の内容
      </accordion-group>
      <accordion-group heading="中項目２">
        <accordion>
          <accordion-group heading="小項目１">
            小項目１の内容
          </accordion-group>
          <accordion-group heading="小項目２">
            小項目２の内容
          </accordion-group>
        </accordion>
      </accordion-group>
    </accordion>
  </accordion-group>
</accordion>

実際にRuby on Rails環境で作成したサンプルはこちら。