折りたたみボタンの色を開閉で変える

サイドバー折りたたみスクリプトで登場する、「＋」と「－」ボタン。
それぞれ別の色にして、見やすくしている記事を発見しました。
「サイドバー折り畳みボタンの色変え」です。

そもそものきっかけは、

Operaで見るとボタンの表示状態に少々問題がある

からだそうで、facetさまのコメントによると、

元記事のSwitchStyleの部分で、widthとheightの直後の「:」が「=」となっていた

ことが原因のようです。
折りたたみスクリプトを使っている皆さん、すぐに修正しましょうね。

さて、本題のボタンの色変えに戻ります。
むいむい星人の寝言さまの記事を参考に、早速チャレンジです。

1.まず、マイリストに記述していた、以下の行を削除します。

switchStyle = "padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;border-style:solid; border-width:1px; border-color:#697497; background:#ecf1fa; font-size:10pt; color:#697497;"

この指定が残っていると、この後追加するスタイルシートの記述が反映されないのだそうです。

2.次に、開閉ボタンそれぞれの設定を、スタイルシートに追加します。
私は「＋」（閉じているボタン）をピンク系、「－」（開いているボタン）を青系にしました。

.sidebar h2.unfolded button {
padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;border-style:solid; border-width:1px; border-color:#697497; background:#ecf1fa; font-size:10pt; color:#697497;
}

.sidebar h2.folded button {
padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;border-style:solid; border-width:1px; border-color:#DB7093; background:#FFF2FA; font-size:10pt; color:#DB7093;
}

私の環境（IE6.0）では、綺麗に表示されました。
他の環境ではいかがでしょうか?

開閉が分かりやすくなり、とてもいいアイディアですね!

【2007.3.5　追記】
「＋」「－」ボタンをクリックしたときに、ボタンにフォーカスが移って、黒枠が表示される現象について。
風柳亭 - 別館：書庫のある庵 -さまの「【覚書】サイドバー折り畳みボタン[+][-]を押した後でフォーカスを外す方法」より、トラックバックで対応方法をお知らせいただきました。

document.onclick=function(e){var t=(e)?e.target:event.srcElement;if(t.className=='switch')t.blur();};

という記述を、「//--＞」行の前に挿入するとの事です。
同じ現象が気になる方は、お試しください。