programs:css_accordion

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- programs:css_accordion [2018/04/26 07:17] – [デモ] 管理者
+++ programs:css_accordion [2018/05/14 21:20] (現在) – 以前のリビジョンを復元 (2018/04/26 07:17) 管理者
@@ 行 1: / 行 1: @@
+====== 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などのブロック要素も使えるようになります）