lab
ウェブデザインの試作品を公開しています。
2020年11月5日木曜日
開閉アイコン付きアコーディオンパネル
パネルの開閉状態をあらわすアイコンが付いたアコーディオンパネル。開くパネルを一つに限定することもできる。
デモページを表示
CSS
補足
28・32行目:開閉状態をあらわすアイコンを文字で指定。
レイアウトが崩れる場合は
リセットCSS・共通CSS
の内容を確認。
jQuery
補足
開くパネルを一つに限定しない場合、5~11行目は不要。
デモページで使用している jQuery のバージョンは 1.12.4 。
HTML
補足
3行目:開くパネルを一つに限定しない時は、dl 要素に accordion-panelクラスを設定する。
31行目:開くパネルを一つに限定する場合、dl 要素に accordion-panel と single-mode の二つのクラスを設定する。
次の投稿
前の投稿
ホーム