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

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

クリックするとボックスを表示
使用したCSSの概要
文章の続きを読む

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

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