クリックでボックスの表示非表示アコーディオンをCSSのみで実装 コピペで使えるHTML+CSS

2021.01.13
スポンサーリンク

詳細や情報をクリックすることで表示する、いわゆる、スポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabelを使い、displayで切り替えを行います。JavaScriptを用いないためAMPサイトでも利用できます。

スポンサーリンク

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

[～表示]をクリックすることで、隠れたinputにチェックが入り、それがトリガーとなってチェックされたinputの弟であるdivのCSSが適用され、隠れていたボックスが表示されます。

<div>について表示と非表示を切り替える仕組みです。<div>の中身は自由に設計できます。

以下はクリックするとソースコードが記述された<div>が表示されます。

public class MainActivity extends AppCompatActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

スタイルシートで記述

<div id="more-box">
  <input id="toggle" class="input-go" type="checkbox" />
  <div class="more-open" style="margin: 0px;"><label for="toggle">ソースコードを表示</label></div>
  <div class="more-close" style="margin: 0px;"><label for="toggle">ソースコードを閉じる</label></div>
  <div class="more-contents" style="margin: 0px;"> /* more-contens内に表示させたい内容を記述 */
    <pre class="brush: java; gutter: false; first-line: 1">public class MainActivity extends AppCompatActivity{
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}
    </pre>
  </div>
</div>
#more-box label{
  cursor: pointer;
}
#more-box input{
  display: none;
}
#more-box input ~ div.more-open {
  display: inline; 
}
#more-box input ~ div.more-contents {
  display: none; 
}
#more-box input ~ div.more-close {
  display: none; 
}
#more-box input:checked ~ div.more-open{
  display: none; 
}
#more-box input:checked ~ div.more-contents{
  display: inline; 
}
#more-box input:checked ~ div.more-close{
  display: inline; 
}

解説

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

処理の流れ

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

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

階層が異なる場合

ここに引用文章がのることになるわけであるが、ほんとうにのるのであろうか

チェックボックスの階層深度と、対象divの深度が異なる場合(a1とb3)は、兄弟関係になるまでさかのぼればよい。

div 深度1 深度2 深度3
show-box a1    
b1 b2

b3

ここの表示を切り替えたい

この場合は深度１までさかのぼって兄弟関係を記述すればよい

<div id="show-box">
  <input id="toggle-show" class="a1" checked="checked" type="checkbox" /><label for="toggle-show"><span class="show">説明文の表示</span></label>
  <div class="b1">
    <div class="b2">
      <blockquote class="b3">
        <p>ここに引用文章がのることになるわけであるが、ほんとうにのるのであろうか</p>
      </blockquote>
    </div>
  </div>
</div>
#show-box .a1 ~ .b1 .b2 .b3 {
display: none; 
}
#show-box .a1:checked ~ .b1 .b2 .b3{
display: block; 
}
#show-boxは明示的な記述であり、記述しなくても動作する。

使用したCSSの概要

display

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

cursor

~セレクタ

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

文章の続きを読む

続きを読む・閉じるアコーディオンをCSSのみで実装 コピペで使えるHTML+CSS AMP対応
[文章の続きを読む]、いわゆるスポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabel、~セレクタを組み合わせる手法を取ります。JavaScriptを使用しない安全で安定的な方法です。
programming-cafe.com

アニメーションを伴うボックスの表示非表示

CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS
JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの２つをフラグとして利用します。CSSのみで実現できる限界点の一つ。
programming-cafe.com
スポンサーリンク