ブログ

アコーディオンメニューをcssだけで

クリックしたらペロンと開くアレ。

Q&Aやフローチャートやメニューなどでなにかと需要のあるアコーディオンメニューの作業メモ

<div class="accbox"> 
  <!--ラベル1-->
  <input type="checkbox" id="label1" class="cssacc" />
  <label for="label1">山路やまみちを登りながら、こう考えた。</label>
  <div class="accshow"> 
    <!--ここに隠す中身-->
    <p>智ちに働けば角かどが立つ。情じょうに棹さおさせば流される。意地を通とおせば窮屈きゅうくつだ。とかくに人の世は住みにくい。</p>
    <p>住みにくさが高こうじると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟さとった時、詩が生れて、画えが出来る。</p>
    <p>人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りょうどなりにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。</p>
  </div>
  <!--//ラベル1--> 
  <!--ラベル2-->
  <input type="checkbox" id="label2" class="cssacc" />
  <label for="label2">越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容くつろげて、束つかの間まの命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降くだる。あらゆる芸術の士は人の世を長閑のどかにし、人の心を豊かにするが故ゆえに尊たっとい。</label>
  <div class="accshow"> 
    <!--ここに隠す中身-->
    <p>住みにくき世から、住みにくき煩わずらいを引き抜いて、ありがたい世界をまのあたりに写すのが詩である、画えである。あるは音楽と彫刻である。こまかに云いえば写さないでもよい。ただまのあたりに見れば、そこに詩も生き、歌も湧わく。着想を紙に落さぬとも※(「王+膠のつくり」、第3水準1-88-22)鏘きゅうそうの音おんは胸裏きょうりに起おこる。丹青たんせいは画架がかに向って塗抹とまつせんでも五彩ごさいの絢爛けんらんは自おのずから心眼しんがんに映る。ただおのが住む世を、かく観かんじ得て、霊台方寸れいだいほうすんのカメラに澆季溷濁ぎょうきこんだくの俗界を清くうららかに収め得うれば足たる。この故に無声むせいの詩人には一句なく、無色むしょくの画家には尺※(「糸+賺のつくり」、第3水準1-90-17)せっけんなきも、かく人世じんせいを観じ得るの点において、かく煩悩ぼんのうを解脱げだつするの点において、かく清浄界しょうじょうかいに出入しゅつにゅうし得るの点において、またこの不同不二ふどうふじの乾坤けんこんを建立こんりゅうし得るの点において、我利私慾がりしよくの覊絆きはんを掃蕩そうとうするの点において、――千金せんきんの子よりも、万乗ばんじょうの君よりも、あらゆる俗界の寵児ちょうじよりも幸福である。</p>
  </div>
  <!--//ラベル2--> 
</div>
.accbox {
  margin: 0 auto;
  width: 90%
}
.accbox label {
  display: block;
  padding: 13px 45px 13px 12px;
  color: #187C00;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  cursor: pointer;
  transition: all 0.5s;
  background: #fff;
  position: relative;
}
.accbox label::after {
  content: "\f077";
  display: block;
  font-family: "Font Awesome 5 Free";
  font-size: 20px;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
}
.cssacc:checked + label::after {
  content: "\f078";
}
.accbox input {
  display: none;
}
.accbox .accshow {
  height: 0;
  padding: 11px 12px;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
  border-top: 1px #000 solid;
  color: #292929;
  font-size: 14px;
  line-height: 20px;
}
.cssacc:checked + label {}
.cssacc:checked + label + .accshow {
  height: auto;
  margin-bottom: 20px;
  background: #fff;
  opacity: 1;
}

コピペできるようにベーシックなスタイル。