こんにちは。
とりあえず、要領のみということで書いてみました。
書き放しなので、効率もよくないしかなりいい加減です。
（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
.accordion { width:600px; }
.accordion h5 { cursor:pointer; }
.accordion h5.active { background-color:#eef; }
.accordion p { overflow:hidden; }
//-->
</style>
</head>
<body>
<div class="accordion">
<div>
<h5>アコーディオン1</h5>
<p>こんにちは、ぼくはアコーディオン1号です。こんにちは、ぼくはアコーディオン1号です。こんにちは、ぼくはアコーディオン1号です。 </p>
</div>
<div>
<h5>アコーディオン2</h5>
<p>こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。</p>
</div>
<div>
<h5>アコーディオン3</h5>
<p>こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。</p>
</div>
</div>
<hr>
<div class="accordion">
<div>
<h5>アコーディオン1</h5>
<p>こんにちは、ぼくはアコーディオン1号です。こんにちは、ぼくはアコーディオン1号です。こんにちは、ぼくはアコーディオン1号です。 </p>
</div>
<div>
<h5>アコーディオン2</h5>
<p>こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。</p>
</div>
<div>
<h5>アコーディオン3</h5>
<p>こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。</p>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion = function(ac){
var animate = [];
var getHeight = function(elm){
var s = elm.style;
var h = s.height, d = s.display;
s.height = "", s.display = "block";
var height = elm.clientHeight || elm.offsetHeight;
s.display = d, s.height = h;
d = d!="none";
h = h!==""?parseInt(h):d?height:0;
return { height:height, h:h, display:d };
}
var getNodes = function(elm){
var result = [];
var i, d, t, p, div = elm.childNodes;
for(i=0; d=div[i++];){
if(d.nodeName=="DIV"){
t = d.getElementsByTagName("h5");
if(t.length){
p = t = t[0];
while(p && p.nodeName!="P") p = p.nextSibling;
result.push({ title:t, element:p });
}
}
}
return result;
}
var slide = function(elm, dir){
var hh = getHeight(elm), style = elm.style;
var h = hh.h, end = dir>0?hh.height:0;
if(0>dir && !hh.display) return;
if(dir>0 && 0==h){ style.height = "1px"; style.display = "block"; }
var id = setInterval(function(){
h += dir;
if((dir>0 && h>end) || (0>dir && end>h)) h = end;
if(0==h) style.display = "none";
style.height = h + "px";
if(h==end) clearInterval(id);
}, 15);
animate.push(id);
}
var setAnimation = function(elm, f){
if(!elm.element) return;
var cls = elm.title.className, disp = /(^| )active( |$)/.test(cls);
var dir = (f && !disp)?4:-4;
cls = cls.replace(/ active/, "");
if(dir>0) cls += " active";
elm.title.className = cls;
slide(elm.element, dir);
}
var func = function(evt){
var t = evt.target || evt.srcElement, p = t.parentNode;
if(t.nodeName != "H5" || !p || !(p=p.parentNode)) return;
if(!/(^| )accordion( |$)/.test(p.className)) return;
var i, e, dir, elements = getNodes(p);
while(e = animate.shift()) clearInterval(e);
for(i=0; e=elements[i++];) setAnimation(e, e.title==t);
}
var i, pair = getNodes(ac);
for(i=0; pair[i]; i++){
pair[i].element.style.display = "none";
}
try{ ac.addEventListener("click", function(e){func(e)}, false); }
catch(e){ ac.attachEvent("onclick", function(e){func(e)}); }
ac = null;
}
window.onload = function(){
var i, d;
var div = document.getElementsByTagName("div");
for(i=0; d=div[i++];)
if(/(^| )accordion( |$)/.test(d.className)) Accordion(d);
}
//-->
</script>
</body>
</html>
お礼
おおお！スゴイっ！ サンプルのものと若干動き方が違うところを見ると、 これはわざわざスクリプトを自作していただいたのでしょうか…！？ めでたく自分の考えていた条件は揃いましたので、 これで行かせて頂きます！ 貴重なお時間を沢山いただいてしまい大変恐縮です。。 本当にありがとうございました！