福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン
MENU

Kyasper Note

この記事はNOTE(メモ)として作成された単一記事です。
2013年12月25日

jQuery とっても簡単 Accordion(アコーディオン)

「FAQ」や「モバイルメニュー」などで利用されるアコーディオンを実装する方法です。

DEMO

クリックしてください
隠れている部分が表示されます

実装手順

  1. 大元のjQueryの読込み
    <head><head>に以下のコードを記述 *WordPressなら1〜3行目はいりません。
  2. アコーディオンを使いところへ以下のコードを記述
    <dt></dt> <dd></dd>は適宜変更してお使い下さい。

アイコン付きにしたい場合

「+」「-」のアイコンなどを付ける場合はCSSを利用します。
以下のデフォルトの状態で出力されるコードと、クリックされた時のコードを示しますのでそれを参考にどうぞ

デフォルトで出力されるコード
クリックされた時のコード
カテゴリー:
タグ: