RailsでJavaScriptを使わずにクリックによる表示切り替えを実装する

花粉症になりかけていたが、それは気のせいだったようだ。単に体調が悪かっただけかもしれない。そういう考えのもと、このあいだもコードを書いていた。文字をクリックするとそこだけ中身が切り替わる、ということを実装したかった。JavaScriptを使わずにやることができた。すこし苦労したのでメモを残しておく。

RailsアプリなのでHTMLではなく、slim記法でviewファイルを書いている。

 .area
    = check_box_tag "userid#{user.id}"
    = label_tag "userid#{user.id}"
      .number
        | 数字表記
      .percentage
        | パーセント表記

これをHTMLにすると以下のようになる。

<div class="area">
  <input type="checkbox" name="userid527754862" id="userid527754862" value="1">
  <label for="userid527754862">
    <div class="number">数字表記</div>
    <div class="percentage">パーセント表記</div>
  </label>
</div>

親であるareaクラスからチェックボックスとlabel要素を書く。そしてその下にnumberクラスとpersentageクラスを書く。これらのクラス名は任意である。checkboxのidとlabel要素のforは同じになるようにする、こうやって関連づけておくことで、labelの中をクリックすることはチェックボックスをクリックすることと同じになる。

CSSは以下のように書く。

.area input
  display: none

.area input:checked ~ label .number
  display: block

.area input:checked ~ label .percentage
  display: none

.area input:not(:checked) ~ label .number
  display: none

.area input:not(:checked) ~ label .percentage
  display: block

.area input の表示を消すことでチェックボックスの欄自体を非表示にする。これによって文字だけが表示される。:checked や:not() は擬似クラスとよばれ、セレクタについて、特定の状態を指定してデザインをあてる。

チェックが入っている時とそうでないときで、デザインを変更している。

~ の記号は後続兄弟結合子と呼ばれる。

https://developer.mozilla.org/ja/docs/Web/CSS/Subsequent-sibling_combinator