サイドバー折り畳み２：リストタイトルをボタンに

便利に使わせて頂いているfacetさんのサイドバー折り畳み２：状態保持機能付きですが、前回の記事でコメントいただいていた、

| こちらのサイドバーのデザインだと、リストタイトル自体がちょっとボタンっぽいので、タイトルをボタンにした方がいいように感じますね。

というご意見が、実はずっと引っかかってました(笑)。

『うん、確かに……そうした方がよりすっきり出来そうだ。』
……それでこの度、ちょっとしたパッチあてに挑戦してみることにしました(^^;。

結果は……ご覧のように'+''-'のボタンは外して、代わりにリストタイトルをボタン化することに成功しました(とりあえずIE6とFirefox1.5で確認)。

パッチをあてたスクリプトは、
http://furyu.tea-nifty.com/script/foldSidebar02c_furyu-patched.js
においてありますので、facetさんの記事にある設置用スクリプトのうち、

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebar02c.js"> </script>

の箇所を

<script type="text/javascript" src="http://furyu.tea-nifty.com/script/foldSidebar02c_furyu-patched.js"> </script>

に修正し、新たに、

foldBroadly = true; //

のあたりに、

foldBroadly = true; // ***** ここから ***** switchStyle = "display:none" ; useTitleButton = true ; unfoldTitleStyle = "＠＠＠open時のリストタイトルstyle＠＠＠" ; foldTitleStyle = "＠＠＠close時のリストタイトルstyle＠＠＠" ; // ***** ここまで ***** //

のような記述を追加することで試してみることは出来ます(＠＠＠～＠＠＠の記述部は設置する方の環境依存。なお、今まで通りボタンも表示したままにしたい場合はswitchStyle = "display:none"は不要。)。

ちなみに当方では、

unfoldTitleStyle = "width:100%;border-style:solid; background-color:#ccccee; border-bottom-width:2px; border-right-width:3px;" ; foldTitleStyle = "width:99%;border-style:outset; background-color:#eecccc; border-bottom-width:4px; border-right-width:5px;" ;

のようにしています。
↓

facetさんのところを参考に修正(2006.03.14)。
unfoldTitleStyle, foldTitleStyleは指定せず(//でコメントアウト)、代わりに設置用スクリプトのすぐ後に

<style type="text/css"> <!-- .sidebar div.module h2.unfolded { width:100%; border-style:solid; background-color:#ccccee; border-bottom-width:2px; border-right-width:3px; } .sidebar div.module h2.folded { width:99%; border-style:outset; background-color:#eecccc; border-bottom-width:4px; border-right-width:5px; } --> </style>

を追加。

なぜか(笑)本家facetさんのサイドバーでも試験的に使用されているようなので、そちらの方が参考になると思います。

もちろん、これはあくまで暫定的な対応ですので、本家の方で同様の機能が取り入れられたりした場合、こちらのパッチ版は削除させていただこうと思っています。ご了承下さい。