htmlとcssのみでアコーディオンパネルを作ってみる


Notice: Undefined index: show_author in /usr/home/aa106acgzb/html/notebook/wp-content/plugins/where-did-they-go-from-here/includes/main.php on line 99

Notice: Undefined index: show_date in /usr/home/aa106acgzb/html/notebook/wp-content/plugins/where-did-they-go-from-here/includes/main.php on line 103

Notice: Undefined index: show_author in /usr/home/aa106acgzb/html/notebook/wp-content/plugins/where-did-they-go-from-here/includes/main.php on line 99

Notice: Undefined index: show_date in /usr/home/aa106acgzb/html/notebook/wp-content/plugins/where-did-they-go-from-here/includes/main.php on line 103

アコーディオンパネルと言えば、jQueryで!ってなるかもしれないけど、htmlとcssだけでは出来ないかな?と思いチャレンジしてみました。

まずは以前の投稿にある、「HTMLとCSSでスマホ用メニュー」の応用で出来そうなので、チェックボックスとラベルタグを使ってみます。

とりあえずは定義リストでベースを組んで何とかしようと思ったのだが、考えれば考えるほど無理です。なぜだめかと言うとdlの中にネスト出来るのはdtとddのみ。
なので定義リストは辞めてdivでコーディングします。

更に当初の予定から変更したのは、チェックボックス。チェックボックスは複数の項目で複数選択できる為、使えません。今回はラジオボタンに変更です。

このhtmlではlabelタグを使うことが重要です。
ラジオボタンは表示させず文字をラジオボタン状態にするにはlabelタグで囲んでやります。

 

動作サンプルはこちらから

 

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログ Webサイト構築へ

投稿者: おーあえ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください