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

レイアウト構成

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

コーディングのヒント!

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

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

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

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習