JavaScript 折りたたみ／展開表示 （折りたたみメニュー） の作り方 |
JavaScript を使った HTML 折りたたみ／展開表示 （折りたたみメニュー） の作り方折りたたみ表示 （折りたたみメニュー、ドロップダウンメニュー） とは、全ての人に必要とはいえない長い文章などを、普段は折りたたんでおいて（非表示にしておく）、必要な人だけ、スイッチをクリックすれば、展開表示される仕掛けの事です 下記の、「詳細を見る」をクリックで、展開／折りたたまれます 簡易折りたたみ設定例詳細を見る 画像付折りたたみ設定例変化しない文字列だけですと、初めて訪れた方には、分かり難いと思いますので、次は、クリックする度に、画像つきで文字列を変化させてみましょう |
簡易折りたたみ設定始めに、簡易折りたたみ設定例で示したように、特定の文字列をクリックすれば、その下に新たな行が表示されたり、消えたりする、簡単な折りたたみ（メニュー）の設置方法をご説明します 詳細を見る <head> 部 <bidy> 部 任意の場所に下記記述例を記述します （そのままコピペすればＯＫです） （お好きなところ、どこでも構いません 当ページでは、下記 「実行例」の枠内に記述しています） |
| 記述例 | <script language=javascript> <!-- function show(inputData){ var objID=document.getElementById( "layer_" + inputData ); var buttonID=document.getElementById( "category_" + inputData ); if(objID.className=='close') { objID.style.display='block'; objID.className='open'; }else{ objID.style.display='none'; objID.className='close'; } } //--> </script> |
| 実行例 | （この枠の中には上記記述例が記入されていますが、javascript で書かれているため、表示されていません） |
<bidy> 部の実際に折りたたみたい部分に記述します |
| 記述例 | <a href="javascript:void(0)" id="category_折りたたみA"
onclick="show('折りたたみA');">詳細を見る</a> <div id="layer_折りたたみA" style="display: none;position:relative;margin-left:15pt" class="close">展開行１<br> 展開行２<br> 展開行３<br> </div> |
| 実行例 | 詳細を見る |
| 記述例 説明 |
<a href="javascript:void(0)" id="category_【名前】"
onclick="show('【名前】');">【スイッチ文字列】</a> 【名前】には、この折りたたみ記述を表す適当な名前（例えば、「折りたたみ１」とか）をつけて、記述します 【スイッチ文字列】には、折りたたむ／展開するためのスイッチであることを表す文字列（例えば、「表示／非表示」等）を適当に決めて記述します 【展開画像、文字列】 には、実際に、【スイッチ文字列】がクリックされた際、展開表示したり、折りたたみ非表示にしたい画像、文字列を記述します |
画像付折りたたみ設定例続いて、クリックする度に、画像、文字列を変化させる設置方法をご説明します <head> 部 <bidy> 部 任意の場所に下記記述例を記述します （お好きなところ、どこでも構いません 当ページでは、下記 「実行例」の枠内に記述しています） |
| 記述例 | <script language="javascript"> <!-- new Image().src = "img/HP_Triangle_TR12pxc008080.gif"; op="img/HP_Triangle_TR12pxc008080.gif"; cl="img/HP_Triangle_TD12pxc008080.gif"; function dd(obj){ if(document.getElementById) {document.getElementById(obj) .style.display=='none'?document.getElementById(obj) .style.display='':document.getElementById(obj) .style.display='none'; document.getElementById(obj+"i").src.indexOf('TD12pxc008080')>0? document.getElementById(obj+"i").src=op: document.getElementById(obj+"i").src=cl } else if(document.all){ document.all(obj).style.display=='none'? document.all(obj).style.display='':document.all(obj).style.display='none'; document.all(obj+"i").src.indexOf('TD12pxc008080')>0? document.all(obj+"i").src=op:document.all(obj+"i").src=cl } else if(document.layers){ document.layers[obj].display=='none'? document.layers[obj].display='':document.layers[obj].display='none'; document.layers[obj+"i"].src.indexOf('TD12pxc008080')>0? document.layers[obj+"i"].src=op:document.layers[obj+"i"].src=cl } } //--> </script> |
|
| 実行例 | （この枠の中には上記記述例が記入されていますが、javascript で書かれているため、表示されていません） | |
| 記述例 説明 |
<script language=javascript> 【折りたたみ時画像ファイル名】には、折りたたみ状態の時に表示する画像（gifファイル等）ファイル名を指定して下さい 【展開時画像ファイル名】には、折りたたみ部が展開状態の時に表示する画像（gifファイル等）ファイル名を指定して下さい 【拡張子を除く展開後の画像ファイル名】には、【展開後の画像ファイル名】から拡張子（.gif等）を除いたファイル名を指定して下さい
|
<bidy> 部の実際に折りたたみたい部分に以下を記述します |
| 記述例 | <div id="折りたたみB"> <a href="javascript:dd('折りたたみ指示B')"><img src="img/HP_Triangle_TR12pxc008080.gif" id="折りたたみ指示Bi" style="border-width : 0px;" alt="右三角印"> 詳細を見る</a> <div style="display:none;margin-left:18pt" id="折りたたみ指示B">展開行１<br> 展開行２<br> 展開行３<br> </div> </div> |
| 実行例 | |
| 記述例 説明 |
<div id=【名前】> 【名前】には、この折りたたみ記述を表す適当な名前（例えば、「折りたたみ２」とか）をつけて、記述します 【展開指示ID】には、展開を指示のIDを適当に決めて記述します 【折りたたみ時画像ファイル名】には、折りたたまれている時に表示しておく画像ファイル名を記述します 【スイッチ文字列】には、折りたたみ／展開を指示するためにクリックされる文字列を記述します 【展開時表示文字列画像】には、展開時に表示させる文字列、画像を記述します 注意．２つ目の【展開指示ID】の後ろに、制御用に「 i 」を付けています 「 margin-left:18pt 」は、展開文字列の左位置の調整用に入れてあります 【展開時表示文字列画像】のところに、さらに、折りたたみ／展開表示を記述することにより、階層構造にすることもできます |
詳細を見る