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

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

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

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

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

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

 

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

 

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

投稿者: おーあえ

コメントを残す

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

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