jQueryでフォームをアコーディオンパネルにしてみた。

コメントの書かれないコメントフォームを省略して表示したい場合にアコーディオンパネルが重宝します。実際に本ブログのコメントフォームに実装したので試してみてください。

実装方法

jQueryライブラリを読み込み、アコーディオン処理を記述すればコメントフォームをアコーディオンパネル化できます。

jQuery

アコーディオンパネルの実装にはjQueryライブラリを使用しているので読み込みます。このとき、実装している処理とjQueryのVersionが合わないと動作しません。以下のライブラリを処理の直前で記述(読み込み)すれば動作します。

アコーディオン

一番最初、コメントフォームは非表示です。

タイトル(コメントをどうぞ▼)をクリックするとコメント欄が表示されます。

まとめ

使うとき以外は非表示にしておきたいコンテンツをアコーディオンパネル化することによって見やすくなります。

(Visited 301 times, 2 visits today)