クリックにより、メニューなどが開閉する例の備忘録です。
WordPressの仕様で、改行に</p><p>が入ったり、変なところで</code>が入ったりして、本題とは違うところで苦労しましたが、「Wordpressの自動挿入されるp,brタグをプラグインを使用しないで削除する」により、何とか書けました。
（ただしIEでは隣接セレクタを正しく解釈しないのでうまく行きません）
JavaScriptの「className」を利用しています。
＼（^o^）／
<h3 onclick="if(this.className=='on') {this.className='off'} else {this.className='on'}">ここを何回か押してみてください</h3>
<p class="message">上の赤い文字（h3）を押す度に～</p>
<p>＼（^o^）／</p>/* カーソルをポインタにして、文字を赤太字に */
h3 {
cursor:pointer;
font-weight:bold;
color:#FF0000;
}
/* h3が「on」のとき、クラス「message」のpを表示 */
h3.on + p.message {
display:block;
color:#000000;
background:#FFCCCC;
padding:1em;
}
/* 初期状態と、h3が「off」のとき、クラス「message」のpを非表示 */
h3 + p.message,
h3.off + p.message {
display:none;
}
<div>
<h2 style="cursor:pointer;" onclick="i=this.parentNode.lastChild;i.style.display=['none',''][(i.flag=!i.flag)+0];return false" onkeypress="this.onclick"><a>ここを押すと開閉します</a></h2>
<div style="display: none;background:#FFCCCC;padding:1em;">
理由はよく分かりませんが～
</div></div>
<div class="accordion">
<h3 style="cursor:pointer;">jQueryをりようすることにより、滑らかに開閉できるようになります（ここをクリック）</h3>
<div style="background:#FFCCCC;padding:1em;">
ここもhtmlに直接スタイルシートを書きました～
</div>
</div>
JavaScriptは<script type="text/javascript">
$(function(){
$("div.accordion div").hide();
$("div.accordion h3").each(function(i){
var elementVal = $(this).next("div");
$(this).click(function(){
elementVal.toggle("normal");
});
});
});
</script>
に加え、JQueryが必要です。すなわちコードに<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>を加えるんですが、これを書いている時点での最新ヴァージョンが「http://code.jquery.com/jquery-1.5.min.js」です。JavaScriptを使いたくない場合は、疑似クラス「target」を使うことによって、特定部分を表示・非表示にさせることができますが、IEでは対応していないようです。
ここを押してみてください 疑似クラス「target」を使えば、JavaScriptを使わずにCSSだけで開閉表示が実現出来ますが、URLの最後に「#～」がつく（開閉するターゲットが画面の最上部にきてしまう）ので、縦方向に画面が移動する可能性が出てきてきます。そのため、レイアウトによっては見ている人を戸惑わせるものも出てきてしまうと思います。
コードは、htmlは<a name="main" href="#more">ここを押してみてください</a>
スタイルシートは
<a name="more" class="more">疑似クラス「target」を使えば～</a>
<p class="sample4"><a href="#main" class="back">元に戻る</a><p>
/* 「more」部分は通常非表示に */
.more {
display:none;
}
/* ターゲット状態で「more」部分を表示 */
.more:target {
display:block;
background:#FFCCCC;
padding:1em;
}
/* 「元に戻る」は通常非表示に */
.more + p.sample4 a {
display:none;
}
/* 「more」部分が表示されたとき、「元に戻る」も表示 */
.more:target + p.sample4 a {
display:block;
}
<a href="http://mixi.jp/simplepost/diary?title=<?php the_title(); ?>&body=<?php the_title(); ?> - <?php the_permalink(); ?>" target="_blank"><img src="http://img.mixi.jp/img/basic/mixicheck_entry/bt_diary_1.png"/></a>