====== CSS span要素の折り畳み(アコーディオン) ====== CSSだけでspanなどインライン要素の折り畳みができるアコーディオンメニューみたいなのを考えてみました。 ===== デモ =====

あいうえお
あいうえお

あいうえお
あいうえお

===== コード ===== html部

開閉内容

開閉内容

css部 input[type="checkbox"].accordion + span{ display:none; } input[type="checkbox"].accordion:checked + span{ display:block; } input[type="checkbox"].accordion{ display:none; } ※WordPressではinputタグの後で改行しないでください。(自動改行によりが挿入されるため動作しません) ===== 備考 ===== 本当はブロック要素(div)が折り畳みの開閉になるとよかったのですが、Wordpressの自動改行によりinputタグとブロック要素の間に勝手に空のpタグを挿入してくれるのでうまく動作しませんでした。(自動改行機能をOFFにできればdivなどのブロック要素も使えるようになります)