HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > JavaScript HTML 折りたたみ/展開表示の作り方
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

JavaScript HTML 折りたたみ/展開表示 (折りたたみメニュー) の作り方


JavaScript を使った HTML 折りたたみ/展開表示 (折りたたみメニュー) の作り方



折りたたみ表示 (折りたたみメニュー、ドロップダウンメニュー) とは、全ての人に必要とはいえない長い文章などを、普段は折りたたんでおいて(非表示にしておく)、必要な人だけ、スイッチをクリックすれば、展開表示される仕掛けの事です

下記の、「詳細を見る」をクリックで、展開/折りたたまれます




簡易折りたたみ設定例


詳細を見る



画像付折りたたみ設定例


変化しない文字列だけですと、初めて訪れた方には、分かり難いと思いますので、次は、クリックする度に、画像つきで文字列を変化させてみましょう

右三角印 詳細を見る




簡易折りたたみ設定



始めに、簡易折りたたみ設定例で示したように、特定の文字列をクリックすれば、その下に新たな行が表示されたり、消えたりする、簡単な折りたたみ(メニュー)の設置方法をご説明します

詳細を見る


<head> 部 <bidy> 部 任意の場所に下記記述例を記述します (そのままコピペすればOKです)
(お好きなところ、どこでも構いません 当ページでは、下記 「実行例」の枠内に記述しています)

記述例 <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">展開行1<br>
展開行2<br>
展開行3<br>
</div>
実行例 詳細を見る
記述例
説明

<a href="javascript:void(0)" id="category_【名前】" onclick="show('【名前】');">【スイッチ文字列】</a>
<div id="layer_【名前】" style="display: none;position:relative;margin-left:15pt" class="close">【展開画像、文字列】 </div>


【名前】には、この折りたたみ記述を表す適当な名前(例えば、「折りたたみ1」とか)をつけて、記述します
【スイッチ文字列】には、折りたたむ/展開するためのスイッチであることを表す文字列(例えば、「表示/非表示」等)を適当に決めて記述します
【展開画像、文字列】 には、実際に、【スイッチ文字列】がクリックされた際、展開表示したり、折りたたみ非表示にしたい画像、文字列を記述します





画像付折りたたみ設定例



続いて、クリックする度に、画像、文字列を変化させる設置方法をご説明します

右三角印 詳細を見る


<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>
<!--
new Image().src = "【折りたたみ時画像ファイル名】";
op="【折りたたみ時画像ファイル名】";
cl="【展開時画像ファイル名】";
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('【拡張子を除く展開時画像ファイル名】')>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('【拡張子を除く展開時画像ファイル名】')>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('【拡張子を除く展開時画像ファイル名】')>0?
        document.layers[obj+"i"].src=op:document.layers[obj+"i"].src=cl
    }
}
//-->
</script>


【折りたたみ時画像ファイル名】には、折りたたみ状態の時に表示する画像(gifファイル等)ファイル名を指定して下さい
【展開時画像ファイル名】には、折りたたみ部が展開状態の時に表示する画像(gifファイル等)ファイル名を指定して下さい
【拡張子を除く展開後の画像ファイル名】には、【展開後の画像ファイル名】から拡張子(.gif等)を除いたファイル名を指定して下さい


注意.ここで使用する【展開時画像ファイル名】ファイルは、ホームページビルダー19の「サイト公開」機能では、サーバーにアップされません
別途、「不要ファイル 削除方法 ( FFFTPミラーリング )」でご紹介しているような、他の ftp ソフトをご利用ください



<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">展開行1<br>
展開行2<br>
展開行3<br>
</div>
</div>
実行例
右三角印 詳細を見る
記述例
説明

<div id=【名前】>
  <a href="javascript:dd('【展開指示ID】')"><img src=【折りたたみ時画像ファイル名】 id="【展開指示ID】i" style="border-width : 0px;">【スイッチ文字列】</a>
  <div style="display:none;margin-left:18pt"id="【展開指示ID】">【展開時表示文字列画像】</div>
</div>


【名前】には、この折りたたみ記述を表す適当な名前(例えば、「折りたたみ2」とか)をつけて、記述します
【展開指示ID】には、展開を指示のIDを適当に決めて記述します
【折りたたみ時画像ファイル名】には、折りたたまれている時に表示しておく画像ファイル名を記述します
【スイッチ文字列】には、折りたたみ/展開を指示するためにクリックされる文字列を記述します
【展開時表示文字列画像】には、展開時に表示させる文字列、画像を記述します

注意.2つ目の【展開指示ID】の後ろに、制御用に「 i 」を付けています
    「 margin-left:18pt 」は、展開文字列の左位置の調整用に入れてあります


【展開時表示文字列画像】のところに、さらに、折りたたみ/展開表示を記述することにより、階層構造にすることもできます
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > JavaScript HTML 折りたたみ/展開表示の作り方
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP