詳細や情報をクリックすることで表示する、いわゆる、スポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabelを使い、displayで切り替えを行います。Javascriptは使用しません。
クリックするとボックスを表示
[~表示]をクリックすることで、隠れた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は常時表示されない
使用した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、~セレクタを組み合わせる手法を取ります。JavaScriptを使用しない安全で安定的な方法です。