サイドバーを折りたたみ式にしてみた

いまさら珍しくもないんだろうけど、サイドバーがごちゃごちゃしてきたのでやってみた。

まず、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;
}

状態を表示するアイコンはなくても良いが、今回は以下のものを使った。

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