コンテンツの開閉(アコーディオン)機能をつける方法について。
コンテンツを開閉するJavaScript
jQueryを使うので、予めダウンロードしておき、利用できる状態にして下さい。
その後、次のJavaScriptをHTMLのheadタグの中に書きます。
開閉する際の時間を変える場合は数字で500と書いている部分を変更します(単位はミリ秒)。
開閉するコンテンツを指定する
開閉させるコンテンツを指定します。
手順は次の通りです。
- 開閉させるコンテンツのHTMLをdivタグ等で囲む。
- 手順1で書いたdivタグ等のclass属性にaccordion-contentを指定する。
以上で開閉させるコンテンツの指定は完了です。
コンテンツの開閉を行うボタンを作る
コンテンツの開閉を行うボタンを作ります。
手順は次の通りです。
- HTMLにボタンのタグ(a、button等)を書く。
- ボタンのタグのclass属性にaccordion-toggleを指定する。
以上でボタンは完成です。