いまさら珍しくもないんだろうけど、サイドバーがごちゃごちゃしてきたのでやってみた。
まず、javascript はこんだけ。
folding_sidebar.js
function toggleFold(sender, id) {
var elm = document.getElementById(id);
if (elm.style.display == "none") {
elm.style.display = "block";
sender.className = "unfolded";
} else {
elm.style.display = "none";
sender.className = "folded";
}
}
MT テンプレートはこんな感じ。標準で畳まれているものにはパターンA、開いているものには B を使う。
<script type="text/javascript" src="folding_sidebar.js"></script>
<-- パターンA -->
<h3 class="unfolded" onmousedown="toggleFold(this, 'sidebar_menu');">メニュー</h3>
<div id="sidebar_menu" style="display: block;">
?中身?
</div>
<-- パターンB -->
<h3 class="folded" onmousedown="toggleFold(this, 'sidebar_entries');">最近の記事</h3>
<div id="sidebar_entries" style="display: none;">
?中身?
</div>
そして、styles-site.css などにスタイルシートも書いておく。
.folded {
background-image: url(/mt/img/folded.png);
background-repeat: no-repeat;
background-position: 5px center;
}
.unfolded {
background-image: url(/mt/img/unfolded.png);
background-repeat: no-repeat;
background-position: 5px center;
}
状態を表示するアイコンはなくても良いが、今回は以下のものを使った。

ひとつが開いたら他は閉じる、みたいな挙動もいいかもしれない。