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

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


デモ


 テキスト
 テキスト
 テキスト


 テキスト2
 テキスト2
 テキスト2

スタイル

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*