もっと見る⇔折りたたむ（DHTML関連） | 小技集

もっと見る⇔折りたたむ

トップ > 小技集 > （DHTML関連）もっと見る⇔折りたたむ

当サイトのトップページで使っている小技です。

　下の「もっと見る」画像をクリックすると隠れていた部分が見え、「折りたたむ」画像をクリックするとその部分がまた隠されます。

　以下のソースをコピペして、htmlファイルとして保存してください。

<html>
<title>もっと見る⇔折りたたむ</title>
<head>
<script language="JavaScript">
<!--
//グローバル変数の宣言
var folder=''
var image=''
var hd="hide.gif"		//「折りたたむ」画像
var sw="show.gif"		//「もっと見る」画像

//フォルダの表示・非表示を実行する処理
function showFolder(subobj, imgobj) {
	folder=document.all(subobj).style
	image=document.all(imgobj)
	if (folder.display=="none") {
		folder.display=""
		image.src=hd
	} else {
		folder.display="none"
		image.src=sw
	}
}
//-->
</script>
</head>
<body>
<!-- 「もっと見る」画像 -->
<div style="cursor:pointer;" onclick="showFolder('sub_01', 'img_01')">
<img id="img_01" src="show.gif">
</div>
<!-- /「もっと見る」画像 -->
<!-- 折りたたむ部分 -->
<div id="sub_01" style="display:none;">
ここの部分が見えたり隠れたりします。
</div>
<!-- /折りたたむ部分 -->
</body>
</html>

　また、下の２つの画像をhtmlファイルと同じフォルダに保存してください。

show.gif

hide.gif

　画像をhtmlファイルとは違うパスに置きたい場合は、htmlファイル中の画像のパスを書き換えてください。

ソース解読のためのヒント

ポイント１：「もっと見る」画像をdivタグで囲む
	初期状態は「もっと見る」画像です。この画像は通常通りimgタグで記述しますが、このimgタグをdivタグで囲みます。そしてdivタグのonclickイベントにJavaScriptの関数を指定します。

ポイント２：見えたり隠れたりする部分をdivタグで囲む
	見えたり隠れたりする部分もdivタグで囲みます。初期状態では非表示とするため、divタグでstyle="display:none"と指定しておきます。

ポイント３： JavaScriptの関数で開閉および画像切り替え
	「もっと見る」画像が押されたときは、画像を「折りたたむ」に切り替え、ポイント２のdivタグ部分を表示します。「折りたたむ」画像が押されたときは、画像を「もっと見る」に切り替え、ポイント２のdivタグ部分を非表示にします。

トップ > 小技集 > （DHTML関連）もっと見る⇔折りたたむ

トップ | このサイトについて | 管理者へメール | サイトマップ