{{tag>プログラミング関連 CSS}} [[start]]＞[[programming_start]] ====== 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などのブロック要素も使えるようになります） ---- [[start]]＞[[programming_start]]