ブログ等でよく利用されるようになった折りたたみ機能
▼続きを読む
続きの内容は元々ここに存在しています。
見かけのデータ量は少なくなりますが、
ブラウザが読み込むデータが減っているわけではありません。
JavaScriptが使えない状況で表示することができなくなってしまうのを防ぐため
<NOSCRIPT>タグで可視に設定し直しています。
ネタバレ防止したい場合には背景色と同色文字にしておくと良いかも
たたむ
<STYLE TYPE="text/css"><!--
DIV.tuzukiwaku{border:1px solid #badefe;padding:3px;margin:3px;display:none;}
--></STYLE>
<SCRIPT language="JavaScript"><!--
function hiraku(geID){
document.getElementById(geID).style.display = "block";
}
function tatamu(geID){
document.getElementById(geID).style.display = "none";
}
//--></SCRIPT>
<NOSCRIPT>
<STYLE TYPE="text/css"><!--
DIV.tuzukiwaku{display:block;color:#ffffff;}
--></STYLE>
</NOSCRIPT>
display:none;で要素を見えなくしています
display:block;で見えるようになります
今回はブロック要素の<DIV>タグなのでblockですが
<SPAN>等のインライン要素の場合はblockの部分をinlineと書きます
スタイルシートを2重に書いた場合、後から読まれる方が優先されるので
<NOSCRIPT>は必ず最初のスタイル設定よりも後に書いて下さい
注）テストした各ブラウザでは問題ありませんでしたが、文法的にはヘッダに<NOSCRIPT>は正しくない方法です…
折りたたみ部分本体
<A HREF="JavaScript:hiraku('
tuzukiK');">▼続きを読む</A><BR>
<DIV CLASS="tuzukiwaku" ID="
tuzukiK">
ここに内容
<A href="JavaScript:tatamu('
tuzukiK');">たたむ</A>
</DIV>
この部分をそれぞれ変えることでひとつのページにいくつでも折りたたみを設置できます
初期設定のスタイルシートとJavaScriptによって色々と動作を変えることができます
本体部分の書きかたは基本と同様です
■見えなくするだけでスペースは確保
▼続きを読む
内容が入る分のスペースは
消えずに確保されてます
<STYLE TYPE="text/css"><!--
DIV.tuzukiwaku{border:1px solid #badefe;padding:3px;margin:3px;visibility:hidden;}
--></STYLE>
<SCRIPT language="JavaScript"><!--
function hiraku(geID){
document.getElementById(geID).style.visibility = "visible";
}
//--></SCRIPT>
<NOSCRIPT>
<STYLE TYPE="text/css"><!--
DIV.tuzukiwaku{visibility:visible;color:#ffffff;}
--></STYLE>
</NOSCRIPT>
■文字色を変える
▼続きを表示
初期で背景色と同じ文字色にして、色を変えるだけ
<NOSCRIPT>書く手間が省けます
<STYLE TYPE="text/css"><!--
DIV.tuzukiwaku{border:1px solid #badefe;padding:3px;margin:3px;color:#ffffff;}
--></STYLE>
<SCRIPT language="JavaScript"><!--
function hiraku(geID){
document.getElementById(geID).style.color = '#000000';
}
//--></SCRIPT>
■重ねてみる
▼続きを読む
ページに割り込まずに重なって表示されます
背景色を設定しておかないとサッパリ読めない事態になります…
少し透過かけてみるのも面白いかもしれません
ここはopacity=90で設定しています
たたむ
基本解説で書いたJavaScript内にスタイルシートを書き出す1行を追加
document.write('<STYLE TYPE="text/css">DIV.tuzukiwaku{z-index:3;position:absolute;background-color:#fff0f5;}</STYLE>');
background-color:〜の部分は背景色の設定
初期から設定してある場合や意図的に背景を見せたい場合などは不要です
見本のように半透明にしたい場合はalpha(opacity=XX);opacity:X.X;を書き加えてください ※Xは透過率数値
alpha(opacity=XX);はIE用、opacity:X.X;はFF用の設定です。
透過率90%にしたい場合はalpha(opacity=90);opacity:0.9;
「▼続きを読む」 など、折りたたみ部分を開くトリガーのアレンジ
■表示切替
閉じているときは開くスイッチ、開いているときは閉じるスイッチを表示します。
▼続きを読む
▲たたむ
文
構造は基本形と同様の単純構造
最初は「文」と「▲たたむ」が非表示
「▼続きを読む」をクリックすると「文」と「▲たたむ」を表示して「▼続きを読む」を非表示にしています
折りたたみ本体部分
<A HREF="JavaScript:ot_hiraku('
tuzukiK','
tuzukiB1','
tuzukiB2');" ID="
tuzukiB1">▼続きを読む</A>
<A HREF="JavaScript:ot_tatamu('
tuzukiK','
tuzukiB1','
tuzukiB2');" ID="
tuzukiB2" style="display:none">▲たたむ</A>
<DIV CLASS="tuzukiwaku" ID="
tuzukiK">
ここに内容
</DIV>
IDが3つになるので少し面倒です…
上の例なら「tuzuki」の部分をまとめて書き換えるなど、1ページに同じIDが出来ないようにご注意下さい
HEADのJavaScript部分 （STYLEやNOSCRIPTは基本形と同様）
<SCRIPT language="JavaScript"><!--
function ot_hiraku(geID,geIDB1,geIDB2){
document.getElementById(geID).style.display = "block"; //文表示
document.getElementById(geIDB1).style.display = "none"; //ボタン1非表示
document.getElementById(geIDB2).style.display = "inline"; //ボタン2表示
}
function ot_tatamu(geID,geIDB1,geIDB2){
document.getElementById(geID).style.display = "none"; //文非表示
document.getElementById(geIDB1).style.display = "inline"; //ボタン1表示
document.getElementById(geIDB2).style.display = "none"; //ボタン2非表示
}
//--></SCRIPT>
ボタン2つと文は同じ場所に置く必要はありません
動作はIDで管理しているので同じページ内ならどこでも大丈夫です
たたむボタンはこのページの最下部に出現しています
ボタンを使用する場合は
<INPUT TYPE="button" VALUE="▼続きを読む" OnClick="ot_hiraku('tuzukiK','tuzukiB1','tuzukiB2');" ID="tuzukiB1">
<INPUT TYPE="button" VALUE="▲たたむ" OnClick="ot_tatamu('tuzukiK','tuzukiB1','tuzukiB2');" ID="tuzukiB2" style="display:none">
■カーソル通過で出現させる
工夫次第で面白いことに使えるかも…
ここにカーソルを乗せると
<SPAN OnMouseOver="hiraku('tuukaK')" OnMouseOut="tatamu('tuukaK')">ここにカーソルを乗せると</SPAN>
OnMouseOver="〜"に開く処理を、 OnMouseOut="〜"にたたむ処理を書きます
とりあえずどんなものか見てください
注）見本はフレームが外れていると動きません。ここからフレーム修復して下さい
開く
MAP
こういうものです
普通の折りたたみ同様画像も貼れます
こちらは1ページに1つしか設置できない構造になってます
複数やろうとしたら上手くいきませんでした(^^;
どうしても複数設置したい時はIDごとに関数を書けば出来ます
たたむ
<HEAD>〜</HEAD>に
<SCRIPT language="JavaScript"><!--
rollw=0;rollh=0;
function Roll(){
window.roll.style.visibility = "visible";
if(rollh >=400){
window.roll.style.width = 400;
window.roll.style.height = 400;
}else{
rollw += 10;
rollh += 10;
window.roll.style.width = rollw ;
window.roll.style.height = rollh ;
window.setTimeout("Roll()", 20);
}
}
function RollD(){
if(rollh <=0){
window.roll.style.visibility = "hidden";
}else{
rollw -= 10;
rollh -= 10;
window.roll.style.width = rollw ;
window.roll.style.height = rollh ;
window.setTimeout("RollD()", 20);
}
}
//--></SCRIPT>
400は大きさです
縦横を変えてもいいですが同じにしないときれいに動きません
<BODY>〜</BODY>に書き込むタグ
開くリンク
<A href="JavaScript:Roll();">開く</A>
たたむリンク
<A href="JavaScript:RollD();">たたむ</A>
スクリーン本体
<SPAN id="roll"
STYLE="
border:5px solid #448FD1;background-color:#ffffff;padding:5px;
z-index:3;visibility:hidden;overflow:hidden;width:5px;height:5px;position:absolute;">
※内容をここに書きます※
</SPAN>