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

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

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>

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などのブロック要素も使えるようになります）

ここは旧トップページ＞日曜プログラミング