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

レイアウト構成

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

コーディングのヒント!

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

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

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

Codejump

著者:Codejump運営者

X
Webサイト制作を学んでいく人、将来Webに関わる仕事をしていく人のために、役に立つ情報や学習コンテンツを提供していきます。
運営者情報

おすすめの記事

関連記事

コーディング練習一覧

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

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

【中級編】かんたんなHTML、CSS、JavaScript(jQuery)を使用した複数ページの練習サイト

【上級編】少し複雑な HTML&CSS&JavaScript(jQuery)を使用した様々なレイアウトの練習サイト

【応用編】複雑なHTML&CSS&JavaScript(jQuery)を使用した動きのある練習サイト

【番外編】Webサイト制作でよく使うHTML、CSS、JavaScript(jQuery)を練習