あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール


サイドバー

メニュー

現在リニューアル中

タグ一覧

programs:css_accordion

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

programs/css_accordion.txt · 最終更新: 2018/05/14 21:20 by 管理者