この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
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]] | ||