HTML/CSS

【コピペ】CSSだけでクリックすると展開するアコーディオンを実装

 

Webサイトを作っていて、よくあるUIの一つが「アコーディオンメニュー」です。

以前にもいくつか記事にしてきましたが、どれもjQueryを使った記事ばかりでした。

 

LPのQ&A部分でよく使われますが、実装方法を知っておけば応用がきくものなので、たくさんのパターンを知っておけばいいかなーとおもってます。

 

https://keibloglife.com/2019/06/12/jquery-show-hide/

https://keibloglife.com/2019/06/13/jquery-if/

https://keibloglife.com/2019/07/27/jquery-acodion-arrow/

 

今回は、CSSだけで実装するアコーディオンメニューについて解説していきます。

 

CSSだけで作るアコーディオンメニュー

See the Pen
CSSだけでアコーディオンメニュー
by kei (@kei_01011)
on CodePen.


今回の実装パターンについて、簡単に解説をしておきます。

 

<div class="hidden-box">
  <input type="checkbox" id="label01">
  <label for="label01">テキストテキストテキスト</label>
  <div class="hidden-show">
    <p>Lorem, ipsum dolor.</p>
  </div><!--/hidden-show-->
</div><!--/hidden-box-->


<div class="hidden-box">
  <input type="checkbox" id="label02">
  <label for="label02">テキストテキストテキスト</label>
  <div class="hidden-show">
    <p>Lorem, ipsum dolor.</p>
  </div><!--/hidden-show-->
</div><!--/hidden-box-->


<div class="hidden-box">
  <input type="checkbox" id="label03">
  <label for="label03">テキストテキストテキスト</label>
  <div class="hidden-show">
    <p>Lorem, ipsum dolor.</p>
  </div><!--/hidden-show-->
</div><!--/hidden-box-->

 

 

inputタグに連動させることで切り替えを行うことが可能です。

必要な要素は以下の通り。

  1. inputタグ
  2. ラベル
  3. 表示する要素

inputにチェックが入ると、直後の隠し要素が表示される仕組みです。

 

 

CSSセレクタ「~」

「~」は「ある要素に後に続く要素」に対してスタイルを指定できる

 

input:checked ~ div

 

とすれば、

「チェックの入ったinputタグの後ろにあるdiv」に対してスタイルが指定できる

 

 

.hidden-box{
  margin:10px;
}
.hidden-box label{
  display: block;
  width: 300px;
  padding:10px;
  font-weight: bold;
  background: #efefef;
  border-radius:4px;
  cursor:pointer;
  transition:all 0.4s;
}

.hidden-box label:before {
  display: inline-block;
  content: '\f078';
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
  transition: 0.4s;
}
.hidden-box label:hover {
  background: silver;
}

.hidden-box input:checked ~ label:before {
  padding:0 0 0 5px;
  transform: rotate(-180deg);
  transform-origin: center;
}

.hidden-box input{
  display: none;
}

.hidden-box .hidden-show{
  height: 0;
  width: 300px;
  display: block;
  padding: 0;
  overflow: hidden;
  opacity:0;
  background: #dd0001;
  border-radius:4px;
  transition:0.3s;
  color:#fff;
  font-weight: bold;
}

.hidden-box input:checked ~ .hidden-show{
  height:auto;
  opacity:1;
  padding:10px 30px;
}

 

jQueryを使わなくても、CSSだけでアコーディオンメニューが再現できました!

もちろんjQueryを使った方がいい場面?もあるのかもしれませんが、CSSだけで再現できるものならやるべきかなーと思いますので、試してみてください。