アコーディオンメニューの作り方

アコーディオンメニューをHTMLとCSSだけで作ってみたのでやり方とコツを残しておきます。

アコーディオンメニュー

クリックで見える情報1

クリックで見える情報2

クリックで見える情報3

HTML

<div class="wrap"> <label for="label1">▼ここをクリック１</label> <input type="checkbox" id="label1" class="swich"/> <div class="content"><p>クリックで見える情報1</p></div> <label for="label2">▼ここをクリック２</label> <input type="checkbox" id="label2" class="swich"/> <div class="content"><p>クリックで見える情報2</p></div> <label for="label3">▼ここをクリック３</label> <input type="checkbox" id="label3" class="swich"/> <div class="content"><p>クリックで見える情報3</p></div> </div>

CSS

:checked<style> .swich{ display: none; } .wrap{ margin: 2em; padding: 0; } .wrap label{ display: block; padding: 10px; background-color:#073365; color: #fff; font-weight: bold; cursor: pointer; } .wrap .content{ height: 0; padding: 0; overflow: hidden; margin-bottom: 1px; border: 1px solid #fff; } .swich:checked + .content{ height: auto; padding: 10px; background-color: #EDE8E4; } </style>

ポイントと解説

  • labelタグのforと、inputタグのidが同じ名前になるようにセットすることで、labelタグとinputタグが連動する。これでもニューが折り畳まれる仕組みを作る。
  • 複数個メニューをセットした時は、labelタグのforと、inputタグのid名は異なる値を設定すること。
  • checkboxは機能だけを使って画面上では見えないようにするために以下を設定すること。 .swich{ display: none; }
  • メニューを開いている時の表示を設定するために、:checkedを使用することで、クリックでの表示切り替えができるようになる。 .swich:checked + .content{ height: auto; padding: 10px; background-color: #EDE8E4; }

コメント

コメントを投稿

このブログの人気の投稿

免許証の裏面で意思表示してみた

イメージ
よくファミレスなどで”アンケートのご記入をお願いします”と置いてあると、書きたくてそわそわしてしまいます。 「笑顔が素敵でまた来たいと思いました！」などと、そのお店のいいなと思ったこと伝えるチャンスなので、ほぼ毎回といった具合に書き込んでしまいます。 あと居酒屋のトイレにある”ご意見でも落書きでもなんでもどうぞ！”みたいに置いてあるノート、これにも何かしらを書いてしまいます。 夏に免許証を手に入れたのですが、”記入は自由です”と書かれた欄を発見したので、前傾姿勢でペンを握りました。 免許証の裏面、記入してる？ 免許証の裏面を見てみると、二つの欄があります。 一つは備考欄。 そしてもう一つが臓器提供の意思表示ができる欄です。 今回私が記入したのは、この臓器提供の意思表示ができる部分。 なんでも記入したがる私にとっては『もちろん書くでしょ！』という勢いで記入していたのですが、”あれ、この記入欄の書き込みは自由だけど、実際書いている人はどのぐらいなのだろう？”とふと気になったので調べてみました。 日本臓器移植ネットワーク(2016年調査) をみてみると、免許証に意思表示欄があることを知っている人の割合が68%なのに対し、実際に記入している人は約19%とのことでした。 意外と少ないですね。 ちなみにこの意思表示欄があるのは免許証だけでなく、身近なものだと保険証の裏面にもあります。 これらを全て合わせた全体で見てみると、意思表示カードや運転免許証、健康保険証での意思表示率は、なんと10.3％～11.2％なのだそうです。 備考欄に手書きはNG 私のようになんでも書き込みたくなるからと言っても、免許証の裏面の記入はしてはいけません。 この備考欄は、例えば引っ越して住所が新しくなった時や、氏名が変更となった時に正式に書き加えられるものらしく、自分の手で書き込むと公文書変造罪となってしまうこともあるらしいのです。 保険証は自分で新住所を書き込むことがあるので、書いてもいいものだと勘違いをしている人も多いようです。 免許証の裏面は、臓器移植に関する意思表示のみ自分で記入ができるということですね。 私の記入したこととその理由 私はこの意思表示欄で、”脳死後および心臓が停止した死後のいずれでも、移植のために臓器を提供します”に丸をつけました。
続きを読む

やると決めたことをちゃんとできていない時

イメージ
だんだん寒くなってくるこの時期は毎年手荒れがひどくなります。 保育士をしていたからだと思い込んでいたのですが、普通に家の食器洗いをするだけでも手は荒れるものですね。 ということで寝る前に塗れるようにと枕元にはハンドクリームが置いてあるのですが、あれ？昨日塗ってから寝た？と毎朝なっています。 結果のために準備がある ハンドクリームを塗るために枕元に置いているのですが、もちろん置くだけじゃ手は保湿されません。 塗ってからやっとつるつるな手に”近づける”ということで、一度塗ったぐらいじゃ乾燥は治りません。 調べるだけでやった気になる現象とよく似ていますが、準備をしたところで満足していてはだめなのですね。 準備が結果の全てという言葉をよく成功者から聞きますが、準備で終わっていたら始まってすらいないということに気がつけました。 めんどくさいは身の破滅 実は、朝になって罪悪感を感じている時もあります。 それは「あ〜眠い。今日ぐらいいっかなあ。あ〜でもな〜〜」と生半可な気持ちで先送りにしたまま眠ってしまい、気がついたら朝だったという時です。 「面倒だからと後回しにしているから手が荒れていくというのに…」 と自分への信頼も失っていきます。 だらだらと先送りにしていることって、楽をしているように見えて実は自分を傷つけている行為なのですね。 『めんどくさいは身の破滅』というのは、中学生の頃の国語の先生が口酸っぱく言ってくれていた言葉です。 今になっても、めんどうだなあと思うたびにこの言葉を思い出します。 あとがき 今日こそはハンドクリームを塗って寝よう！2日もかけていなかったから今日こそはブログ書こう！と思いながら書いたブログでした。 立ち止まることがあっても、また歩き出せればいつか到達できるものがあると信じています。 チャレンジは気楽に、今できることは全力でやっていけたら良いなと思います。 ということでこのあとはハンドクリームしっかり塗ったら全力で良い睡眠を取ろうと思います。
続きを読む

思考が滞った時にしたいこと

イメージ
思考が滞るといろんなことの生産性を下げてしまいます。 例えばネガティブなで出来事があった時にポジティブに変換できなかったり、仕事や勉強が捗らなかったり。 どうしたら思考を広げていけるでしょうか？ 私がやってみて良かったことと、こんな風にしたらいいのかもというアイディアを書いていきます。 下がった思考力を上げるためにしたいこと 書き出す 頭の中を整理するためにも、気持ちと呼吸を整えるためにも、紙に書き出すというのは効果的です。 記録が目的ではなく、思考の流れをよくするための行為なので、綺麗に書く必要はありません。 思い浮かんだことを、思い浮かんだ順に書いていけばいいのです。 書き出しながらアイディアが浮かぶこともあるので、いつもPCでメモを取る人には特におすすめしたい方法です。 環境を変えてみる 座っていたのを立って作業するのでも効果はあります。 部屋で作業していたのならカフェへ行ってみたり、作業中に聞いている音楽を変えてみたり、ほんのちょっとの変化でも思考に動きが生まれます。 体を動かす ストレッチをして体を伸ばすのも、軽い散歩へ出かけるのでも、ランニングやウォーキングで汗をかくのも、どれも良いリフレッシュとなることでしょう。 ”歩きながらぼーっとすることでデフォルトモードネットワークが働き、あらゆる記憶が結びつく”とチコちゃんも言っていました。 脳を動かすためには、まず体を動かしてみるといいのかもしれないですね。 自然に触れる 自然のパワーは偉大です。 呼吸を深くしてくれるので、気分転換に時々自然のあるところへ行くと気持ちがスッキリします。 あとは空が広いところへ行くというのも気持ちが落ち着きます。 以前は尊敬する先輩が葉山の海へ連れて行ってくれ、潮風に当たりながら「こんな壮大な海と空から見たら、私たちの悩みってちっぽけに感じられるよね〜」と話をしました。 大きく深呼吸できる自然から、たくさん力をもらえば”よし。またがんばろう”と気持ちが切り替わります。 味わってご飯を食べる スマホをしながら、テレビを見ながらといった”ながら食べ”は、食事をしている実感がないままご飯を食べ終えてしまいます。 ただ口へご飯を運んで体に取り込むと言った作業的な食事をしていると、自覚なく食べ過ぎてしまったり、あまり噛んでいな
続きを読む