サイドメニューの折りたたみ【 1 】

サイドにあるコンテンツメニューを折り畳む方法です。
随分前から導入していたにも係わらず、記事に起こしていなかったのでご紹介。

１つ目は、少し前まで使用していた自作テンプレートにて利用していたスクリプトです。

参照記事(有難うございます)
■ seesaaのサイドバーを折りたたむ [ KOROPPYの本棚 ]
■ [ブログ]番外編　コラム開閉スクリプト [ 色と日記とウェブログと ]

※後者がスクリプトの提供元サイト様です

1.先ずはスクリプトをコピー。

/* コラム開閉スクリプト */
function toggleOpenClose(id,val){
if(val == "▲"){
document.getElementById(id).style.display = "none";
document.getElementById('btn' + id).value = "▼";
}
else{
document.getElementById(id).style.display = "block";
document.getElementById('btn' + id).value = "▲";
}
}

function getButton(obj, i , sInner , bDefaut){
var ret;
var val;
if ( bDefaut ) {
val = "▲";
}
else {
val = "▼";
}
ret = '<div align="left">'+'<label for="btncolumn' + i + '" class="columntitle">' + sInner + '</label>'+'<input type="button" value="' + val + '" id="btncolumn' + i + '" class="btncolumn" onclick="toggleOpenClose(\'column' + i + '\',this.value);"/>' + '</div>';
obj.setAttribute("id", 'column' + i);
return ret;
}

var aryTitle = new Array();
var aryDefault = new Array();

/* ここから２行ずつひとまとまり */
/*----ここから----*/

aryTitle[1] = "※";
aryDefault[1] = false;

aryTitle[2] = "※";
aryDefault[2] = true;

/*----ここまでの間に開閉させたいコラムの数だけコピペして修正----*/

var aryDiv = document.getElementsByTagName("div");
var sTmpInner;
for(var j = 0; j < aryDiv.length; j++){
if(aryDiv[j].getAttribute("class") == "sidetitle" ||aryDiv[j].getAttribute("className") == "sidetitle"){
sTmpInner = aryDiv[j].innerHTML;
for(var i = 0; i < aryTitle.length ; i++){
if (sTmpInner.indexOf(aryTitle[i]) != -1 ) {
aryDiv[j].innerHTML = getButton(aryDiv[j+1], i , sTmpInner , aryDefault[i]);
}
}
}
}

if(document.getElementById){
document.writeln('<style type="text/css" media="all">');
document.writeln('<!--');
for(var i = 0; i < aryDefault.length ; i++){
if( aryDefault[i] ){
document.writeln('#column' + i + '{display:block;}');
}
else {
document.writeln('#column' + i + '{display:none;}');
}
}
document.writeln('-->');
document.writeln('</style>');
}

青字はコメント（説明）ですので、コピーしてもしなくても大丈夫です。

2.赤字部分が変更箇所。

▲、▼は『＋、−』など好きな記号に変更出来ます。

aryTitle、aryDefaultは開閉ボタンの設定。２行で１セットなので注意。

※部分にはコンテンツの名前を入力し、デフォルトで開いておく場合はtrue、閉じておく場合はfalseを指定します。

[]内の数字は 1 から連番で入力し、開閉の指定をしたいコンテンツの数だけこの２行の記述を増やしていきます。

3.指定が済んだら、全文を
sidebarfold.js
など好きな名前で、拡張子を.js、文字コードをEUC-JPにて保存（でないと動かないそうです）。

4.ファイルマネージャーでこのjsファイルをアップロード。

5.サイドバーの最下部に「自由形式」のコンテンツを追加し、アップロードしたファイルのURLに変更します。

例：
<SCRIPT language="JavaScript" type="text/javascript" src="http://***.up.seesaa.net/***/***.js" charset="EUC-JP"></SCRIPT>

尚、開閉ボタンのデザインを変更をしたい場合はCSSで行います。
方法は↑上記参照サイトに説明がありますので、そちらへどうぞ。

ブログの記事、ブログの話題

↓の評価ボタンを押してランキングをチェック！