内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
CSS span要素の折り畳み(アコーディオン)
css_accordion
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{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
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ