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

Tweet

Pocket

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

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

<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は常時表示されない

使用した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

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

programming-cafe.com

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

CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS

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

programming-cafe.com

Tweet

Pocket