css_accordion

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

--- css_accordion [2018/05/14 21:19]
管理者
+++ css_accordion [2018/05/14 21:19] (現在)
管理者
@@ ライン 1: / ライン 1: @@
+{{tag>プログラミング関連 CSS}}
+[[start]]＞[[programming_start]]
+====== CSS span要素の折り畳み(アコーディオン)  ======
+CSSだけでspanなどインライン要素の折り畳みができるアコーディオンメニューみたいなのを考えてみました。
+----
+===== デモ =====
+<html>
+<style>
+.b1{border:1px solid #808080;}
+input[type="checkbox"].accordion + span{
+  display:none;
+}
+input[type="checkbox"].accordion:checked + span{
+  display:block;
+}
+input[type="checkbox"].accordion{
+  display:none;
+}
+</style>
+<div class="b1">
+<p>
+<label for="join01">［＋］タイトル(ここをクリックすると開閉)</label>
+<input type="checkbox" id="join01" class="accordion" /><span>あいうえお<br>あいうえお<br></span>
+</p>
+<p>
+<label for="join02">［＋］初期状態が開いた状態(ここをクリックすると開閉)</label>
+<input type="checkbox" id="join02" class="accordion" checked="checked" /><span>あいうえお<br>あいうえお<br></span>
+</p>
+</div>
+</html>
+===== コード =====
+html部
+<code html>
+<p>
+<label for="join01">タイトル(クリックすると開閉)</label>
+<input type="checkbox" id="join01" class="accordion" /><span>開閉内容</span>
+</p>
+<p>
+<label for="join02">初期状態が開いた状態(クリックすると開閉)</label>
+<input type="checkbox" id="join02" class="accordion" checked="checked" /><span>開閉内容</span>
+</p>
+</code>
+css部
+<code css>
+input[type="checkbox"].accordion + span{
+  display:none;
+}
+input[type="checkbox"].accordion:checked + span{
+  display:block;
+}
+input[type="checkbox"].accordion{
+  display:none;
+}
+</code>
+※WordPressではinputタグの後で改行しないでください。(自動改行によりが挿入されるため動作しません)
+===== 備考 =====
+本当はブロック要素(div)が折り畳みの開閉になるとよかったのですが、Wordpressの自動改行によりinputタグとブロック要素の間に勝手に空のpタグを挿入してくれるのでうまく動作しませんでした。（自動改行機能をOFFにできればdivなどのブロック要素も使えるようになります）
+----
+[[start]]＞[[programming_start]]

css_accordion.txt · 最終更新: 2018/05/14 21:19 by 管理者