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

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

実装方法

[続きを読む]をクリックすることで、隠れた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などでは機能しないことがある。そのため、~を使用して弟についてクラスで限定する方法をとっています。

処理の流れ

<label>をクリック→ <input>がチェックされる → チェックされた<input>の弟の<span>に適用

 ※inputはdisplay:none;ですから、inputは常時表示されない

使用するCSSの概要

display

display ボックスの表示方法 コピペで使えるHTML+CSS
要素をどのように配置するか、displayを使って決定します。blockやinline、inline-block、そしてflex、そして表示をしないnone、具体的な事例をあげてdisplayによってどのように要素が配置されるかを例示します。

cursor

~セレクタ

CSSの各種セレクタ CSS コピペで使えるHTML+CSS
クラスセレクター、IDセレクターのほか、>や+、~を使った間接、子孫、弟セレクターの使用方法の解説です。~を使って弟を限定する方法についても解説。

クリックするとボックスを表示と非表示

クリックでボックスの表示非表示アコーディオンをCSSのみで実装 コピペで使えるHTML+CSS
詳細や情報をクリックすることで表示する、いわゆる、スポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabelを使い、displayで切り替えを行います。Javascriptは使用しません。