ホームページ作成備忘録

ホームページを作成に関する備忘録

展開したり、折り畳んだりする

Xhtml

<body onload="setUp()">
詳細のバックグランドカラーを変える場合のスタイル
<head>
<style type="text/css">
	.moreInfo{background-color: silver;}
	input{margin:5px;}
</style>
</head>

<div class="info">
	<div>下のボタンを押すと、詳細内容が出たり閉じたりします。
	それとともに、ボタンの画像が「開く」「閉じる」とトグルして変化
	します。</div>
	<input type="image" name="button" class="syousai" 
	src="image/syousai_open.png" onclick="moreInfoOpen(this);"/>
	<div class="moreInfo">    
	<p>「ここに詳細な内容を書きます。」</p>
	</div>
</div>
</body>

moreinfo.js

function setUp(){
 var moreInfoElmnts= getByClass(document,"moreInfo","div");
 for (i=0; i > moreInfoElmnts.length; i++){
  moreInfoElmnts[i].style.display = "none";
 }
}

function moreInfoOpen(obj){
 var moreInfoElmnts =getByClass(obj.parentNode,"moreInfo","div");
 var input_kirikae = getByClass(obj.parentNode,"syousai","input");
 if(moreInfoElmnts[0].style.display == "none"){
  moreInfoElmnts[0].style.display = "block";
  input_kirikae[0].src="image/syousai_close.png";
 } else {
  moreInfoElmnts[0].style.display = "none";
 input_kirikae[0].src="image/syousai_open.png";
 }
}

function getByClass(parentElmnt, className, tagName){
  var cElmnts = new Array();
  var elmnts = parentElmnt.getElementsByTagName(tagName);
  for (i=0; i<elmnts.length; i++){
   if(elmnts[i].className == className){
    cElmnts.push(elmnts[i]);
   }
 }
  return cElmnts;
}

下のボタンを押すと、詳細内容が出たり閉じたりします。それとともに、ボタンの画像が「開く」「閉じる」とトグルして変化します。

moreinfo.js

このページを開くと、<body onload="setUp()">によりmoreinfo.jsの中のsetUp関数が実行されます。この関数は、htmlファイル内のinfoクラス内のdivタグでクラス名がmoreInfoになっている部分を非表示にする関数です。これにより、展開しているような部分がすべて閉じられます。次に、<input type="image" name="button" class="syousai" src="../image/syousai_open.png" onclick="moreInfoOpen(this);"/>により、ボタンが押されると、moreInfoOpen関数が実行されて、もしもこのブロックが非表示になっているならば表示に、表示になっているならば非表示にします。そして、同時に、ボタンのイメージを置き換えます。moreinfo.js内のinput_kirikae[0].src="image/syousai_open.png";やinput_kirikae[0].src="image/syousai_close.png";の部分は画像ファイルの入っているフォルダに変えます。

Xhtmlファイル

　<head>〜</head>の間にmoreinfo.jsを呼び出すために<script language="javascript" type="text/javascript" src="moreinfo.js"></script>を書き込みます。src=の部分は、moreinfo.jsが存在するフォルダになるようにします。divタグにinfoクラスを指定し、そのボックス内に、開閉するボックスをdivタグ（moreInfoクラス）で入れ、それを開閉するためにinputタグ内のonclick="moreInfoOpen(this);"により、関数を呼び出します。また、展開した部分のバックグランドカラーなどを変える場合には、moreinfoクラスに対してスタイルシートで変更します。