クリックで内容を展開しページ内容を押し下げる

説明

スタイルシートのvisibilityプロパティでは単純にエレメントの表示／非表示が行われるだけですが、displayプロパティを使えば以後に続く内容を押し下げたり詰めたりすることができます。
displayプロパティにblockを指定すると内容が（ブロックレベル要素として）表示されます。逆に内容を詰めたい場合にはnoneではなく""を指定します。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all" id="cssMain">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>クリックで内容を展開しページ内容を押し下げる</h1>
<div id="photoAlbum">
<div class="photo">
<a href="images/DSC0001.jpg">写真１［木曽の大橋］</a><br>
<img src="images/DSC0001.jpg" width="240" height="135">
</div>
<div class="photo">
<a href="images/DSC0002.jpg">写真２［諏訪湖花火］</a><br>
<img src="images/DSC0002.jpg" width="240" height="135">
</div>
<div class="photo">
<a href="images/DSC0003.jpg">写真３［高原］</a><br>
<img src="images/DSC0003.jpg" width="240" height="135">
</div>
</div>
</body>
</html>
window.onload = function(){
var linkTag = document.getElementById("photoAlbum").getElementsByTagName("a");
for (var i=0; i<linkTag.length; i++){
linkTag[i].onclick = function(){
var ptr = this.nextSibling;
while((ptr.nodeType != 1) || (ptr.tagName.toLowerCase() != "img")){
ptr = ptr.nextSibling;
}
if (ptr.style.display == "") ptr.style.display = "block"; else ptr.style.display = "";
return false;
}
}
}