<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var display_tag;
window.onload = function() {
if (!document.getElementsByTagName) return;
var change_tag = document.getElementsByTagName("h4"); // 見出しの部分のタグ
display_tag = document.getElementsByTagName("dl"); // 非表示させたい部分のタグ
for (var i = 0; i < change_tag.length; i++) {
// 非表示させたいタグの処理
display_tag.item(i).style.display = "none"; // display_tag[i].style.display = "none";
// 見出しの文字を取得して表示切り替えのリンクに変更
var ele = change_tag.item(i);
var str = ele.innerText || ele.innerHTML; // var str = ele.firstChild.data;
ele.innerHTML = '<a href="javascript:show(' + i + ');">' + str + '<\/a>';
}
}
function show(a) {
var ele = display_tag.item(a);
ele.style.display = (ele.style.display == "none") ? "block" : "none";
}
// -->
</script>
</head>
<body>
<h4>見出し1</h4>
<dl>
<dt>タイトル1</dt>
<dd>あいうえお</dd>
<dt>タイトル2</dt>
<dd>かきくけこ</dd>
</dl>
<h4>見出し2</h4>
<dl>
<dt>タイトル1</dt>
<dd>あいうえお</dd>
<dt>タイトル2</dt>
<dd>かきくけこ</dd>
</dl>
</body>
</html>
「見出しがあってその内容がある」というようなページで、内容を非表示時にしておいて見出しをクリックすると内容を表示させるというスクリプトです。見出しの部分のタグ、内容を表示する部分のタグの任意の2種類のタグを使用します。
あらかじめ見出しとなるタグ（この例では <h4>）とその内容を非表示にしたいタグ（この例では <dl>）を1セットとして指定してください。誤作動を防止するため、ここで使用する2種類のタグをページ内のスクリプトを適用しない部分には使用しないでください。
初めにスクリプト内の document.getElementsByTagName("??") の ?? にタグ名を記述してください。
まず、ページが読み込まれた時にページ内の非表示にしたいセットの個数を取得します。そして、実際の見出し部分 (<h4> 〜 </h4>) の文字列を表示切替のリンクに変更して、非表示させたい部分 (<dl> 〜 </dl>) を非表示にします。
見出しの文字列を取得時、見出しに指定したタグ内に他の要素（タグ）が存在するかも知れないということを想定していますが、見出しのタグ内に別の要素がない場合は、var str = ele.firstChild.data; としても良いです。
この変更された見出し部分のリンクをクリックすると、関数 show を呼びだして現在の表示状況によって内容表示部分の表示を切り替えます。JavaScript を無効にしている場合や getElementsByTagName が使用できないブラウザの場合は、通常どおりの内容が表示されます。