続きを読む・閉じるアコーディオンをCSSのみで実装コピペで使えるHTML+CSS AMP対応

HTML&CSS

2021.01.132021.12.10

[文章の続きを読む]、いわゆるスポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabel、~セレクタを組み合わせる手法を取ります。JavaScriptを用いないためAMPサイトでも利用できます。

実装方法
文章の途中に続きを読むと末尾に閉じる
使用するCSSの概要
クリックするとボックスを表示と非表示

実装方法

[続きを読む]をクリックすることで、隠れたinputにチェックが入り、それがトリガーとなってチェックされたinputの弟であるspanのCSSが適用され、隠れていた文章を表示する、という方法です。

文章の途中に続きを読むと末尾に閉じる

親譲りので小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。 [続きを読む] 弱虫やーい。としたからである。に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。[続きを閉じる]

スタイルシートで記述

<div id="read-more-0">親譲り～来まい。 
  <input id="toggle0" class="input-go" type="checkbox" /> 
  <span class="more-open" style="margin: 0px;">
    <label for="toggle0">[続きを読む]</label>
  </span>
  <span class="more-contents" style="margin: 0px;">弱虫～答えた。<span class="more-close" style="margin: 0px;"><label for="toggle0">[続きを閉じる]</label></span>
  </span></div>
<div>      /*Wordpressの場合、改行をせず、要素を詰めて配置してください*/

#read-more-0 label{ /* label上のカーソルをリンク時と同じタイプにする*/
  cursor: pointer;
}
#read-more-0 input{ /* inputは非表示 */
  display: none;
}
#read-more-0 input ~ span.more-open {/* 無くても機能する */
  display: inline;
}
#read-more-0 input ~ span.more-contents {
  display: none; 
}
#read-more-0 input ~ span.more-close {
  display: none; 
}
#read-more-0 input:checked ~ span.more-open{ /*チェックされたinputの弟で、クラス名がmore-openのspanに適用*/
  display: none; 
}
#read-more-0 input:checked ~ span.more-contents{
  display: inline; 
}
#read-more-0 input:checked ~ span.more-close{ /* 無くても機能する */
  display: inline; 
}

解説

<label>をクリックすることで見えない状態(display:none;)のinputのチェックを入れる。すると、input:checkedになる。input:checkedの弟のなかで、span.more-openが実行される。＋を使用する方法があるが、直近の弟のみが実行されるため、Wordpressなどでは機能しないことがある。そのため、~を使用して弟についてクラスで限定する方法をとっています。