【CSS】「もっと見る」ボタン(使い切り)をCSSだけで実装

こんなときに使える

1. 連続するアイテムがあり、その表示数を最初の数個に制限し、それ以降を隠したい。
2. 「もっと見る」ボタンを置いておき、それを押すことで全表示させる。
3. 「もっと見る」ボタンは押すと消え、折り畳む必要はなし。使い切りタイプ。
4. jsは使わず、cssだけでサラッと作りたい。

ソースコード (pug, scss

.wrap
  input.check#isMore(type="checkbox", name="")
  label.label(for="isMore") もっと見る
  .itemWrap
    .item アイテム1
    .item アイテム2
    .item アイテム3
    .item アイテム4
    .item アイテム5
    .item アイテム6
    .item アイテム7
    .item アイテム8

.wrap {
  position: relative;
}

.itemWrap {
  margin: 30px auto;
}
.item {
  color: #fff;
  width: 100px;
  height: 100px;
  background-color: #555;
  margin: 0 auto 30px;
  &:nth-child(n+5) {
    display: none;
  }
}

.check {
  display: none;
  &:checked {
    & + .label {
      display: none;
    }
    & ~ .itemWrap .item:nth-child(n+5) {
      display: block;
    }
  }
}
.label {
  border: 1px solid #444;
  padding: 8px 12px;
  border-radius: 20px;
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
  &:hover {
    background-color: #444;
    color: #fff;
  }
}

解説

基本

inputタグによるチェックボックスを使う。
「もっと見る」ボタンを、inputタグのラベルとして用意する。

ラベルとは、
クリックすると対応するinputタグに自動フォーカスするタグ。
http://www.htmq.com/html/label.shtml

ボタンを押すとチェックボックスがオンになる。
チェックボックスがオンの状態のとき、隠れているアイテムを表示するようcssを書く。

詳細

HTML

.wrap
  input.check#isMore(type="checkbox", name="")
  label.label(for="isMore") もっと見る
  .itemWrap
    .item アイテム1
    .item アイテム2
    .item アイテム3
    .item アイテム4
    .item アイテム5
    .item アイテム6
    .item アイテム7
    .item アイテム8

表示したいアイテム部分を囲うdivとの兄弟要素として、inputや labelを置く。
input側にはidを指定し、それをlabelのfor属性でid名を記述する。これによりラベルがチェックボックスに紐づく。

これらはアイテム部分を囲うdivの前に書く。
label部分の配置は、絶対配置を使いたいため、更に外側にdivを用意しておく。

itemの非表示

.item {
	//省略
 &:nth-child(n+5) {
    display: none;
  }
}

今回は、初期表示を4個とする。（=5個以降を非表示

チェックボックス

.check {
  display: none;
  &:checked {
    & + .label { //---1
      display: none;
    }
    & ~ .itemWrap .item:nth-child(n+5) {//---2
      display: block;
    }
  }
}

チェックボックスは、今回の機能実装のために用意した要素なので、見えている必要はない。よって、まずデフォルトでdisplay: none;。

チェック状態は :checkedで取れる。
この中で、チェックon状態のCSSを記述する。

1. まず、ラベル（＝もっと見るボタン）は使い切りなので、チェックonでは消す。隣接セレクタ（+）を使って指定。
2. itemの表示を指定。サンプルでは、チェックボックスの以降にある兄弟要素の、itemWrapの中にあるitemの5番目以降…と書いている。
   兄弟セレクタ（~）を使っている。

※セレクタではあくまで兄弟を指定することしかできないため、itemを指定する際も、兄弟(itemWrap)の中にある〇〇(item)という書き方をしなければいけない。

セレクタの使い方、チートシート
https://webliker.info/css-selector-cheat-sheet/

ラベル

.label {
  //省略
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
}

ラベルはボタンぽい見た目に。
絶対配置で、itemWrapの下辺りに置いておく。

実装サンプル in codepen

一度ボタンを押すと消えてしまうので、ボタンを復活させるときはリロードを。