css：span要素の折り畳み(アコーディオン)

　span要素(インライン)を折り畳みができるCSS、アコーディオンメニューみたいなの。

デモ

スタイル

  input[type="checkbox"].accordion + span{
    display:none;
  }
  input[type="checkbox"].accordion:checked + span{
    display:block;
  }
  input[type="checkbox"].accordion{
    display:none;
  }

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>

※inputタグの後で改行しないでください。(WordPressの自動改行によりが挿入されるため動作しません)

まとめ

　本当はブロック要素(div)が折り畳みの開閉になるとよかったのですが、Wordpressの自動改行によりinputタグとブロック要素の間に勝手に空のpタグを挿入してくれるのでうまく動作しませんでした。（自動改行機能をOFFにできればdivなどのブロック要素も使えるようになります）