メモ

主にプログラミング系の備忘録

見出しをクリックすると開閉するブロック

javascript HTML

javascript関数部分

// URLからIDをGet⇒表示・非表示の切替
// Indexからの遷移の場合は表示させるのみ(非表示への切替は行わない)。
function test(id){
　if(id.match(/to/) == "to"){
　　ChgIconMode("main" + document.getElementById(id).getAttribute("href").split("#")[1],"");
　}else{
　　ChgIconMode("main" + document.getElementById(id).getAttribute("href").split("#")[1],"change");
　}
}
// onloadイベントの場合は自身のURLから直接取得する。
function test2(){
　if(window.location.href.split("#").length > 1){
　　ChgIconMode("main" + window.location.href.split("#")[1],"");
　}
}
// アイコン切替&表示・非表示の設定
function ChgIconMode( arg , mode ){
　//非表示の場合は表示する
　if(document.getElementById(arg).style.display == 'none'){
　　document.getElementById( arg ).style.display = 'block';
　　document.getElementById( arg + 'Op').style.display = 'none';
　　document.getElementById( arg + 'Cl').style.display = 'inline';
//表示状態で、切替モードの場合は非表示にする
　}else if(mode == "change"){
　　document.getElementById( arg ).style.display = 'none';
　　document.getElementById( arg + 'Op').style.display = 'inline';
　　document.getElementById( arg + 'Cl').style.display = 'none';
　}
　return(false);
}

css部分

大して使っていないが

span.icon{
　border: black;
　border-style: solid;
　border-width: 1px;
　text-align: center;
　vertical-align: middle;
　margin-right: 4px;
}

HTML部分(抜粋)

<!-- body -->
<body onload="test2()">
<!-- /body -->
<!-- index部分 -->
<ul>
  <li><a href="#【ID】" id="to【ID】" onclick="test('to【ID】')">見出し</a></li>
</ul>
<!-- /index部分 -->
<!-- 本文部分 見出し部分は改行させない方が良い。-->
<h3>
　<a href="javascript:;" onmousedown="ChgIconMode('main【ID】','change');" style="text-decoration: none;">
　　<span class="icon" id="main【ID】Op" style="display: inline;">＋</span>
　　<span id="main【ID】Cl" style="display:none;" class="icon">−</span>
　</a>
　<a name="【ID】" id="【ID】" class="label">見出し</a></h3>
<div id="main【ID】" style="display: none;">
本文
</div>
<!-- /本文部分 -->