【レイアウト構成】番外編：アコーディオンメニューの練習

コーディング練習レイアウト構成ソースコードデモ

レイアウト構成

サイト全体のレイアウト構成

コーディングのヒント!

コンテンツの横幅を設定するため、全体をdivタグで囲みます。

タイトル: h2タグで記述します。（ここはpタグでもOKです。）
アコーディオンメニュー: アコーディオンメニューをul、liのリストタグで囲みます。
さらに、メニューのタイトルとコンテンツ部分をそれぞれdivタグで囲みます。
コンテンツの中身は、dl、dt、ddタグでコーディングします。
アコーディオンメニュー（jQuery）: メニューのタイトル部分のdivタグがクリックされた時のイベント処理を作成します。
そのイベント処理の中で、「next()」と「slideToggle()」を使って、コンテンツ部分の表示・非表示を切り替えます。
また、「toggleClass」使って、プラスとマイナスのアイコンを切り替えるための、openクラスの追加、削除を行います。

コーディング練習メニューに戻る

【jQuery コーディング練習】番外編：アコーディオンメニューの練習

関連記事

コーディング練習一覧