Happy Programming

var Accordion = Class.create({
    initialize: function(elems) {
        elems.each(function(elem, i) {
            var formerHeight = parseInt(elem.getStyle('height'));
            if (i != 0) elem.hide();
            else elem.previous().setStyle({backgroundColor: '#AAA'});
            var triggerObj = elem.previous();
            triggerObj.observe('mouseover', function(event) {
                event.element().setStyle({'backgroundColor': '#AAA'});
                var timeID = setTimeout(function () {
                    if (elem.getStyle('display') == 'none') {
                        var height = 0;
                        elem.show();
                        elem.setStyle({height: height + 'px'});
                        var timeID1 = setInterval(function() {
                            height += 20;
                            elem.setStyle({height: height + 'px'});
                            if (height > formerHeight) {
                                elem.setStyle({height: formerHeight + 'px'});
                                clearInterval(timeID1);
                            }
                        }, 15);
                    }
                    elems.each(function(elem, j) {
                        if (elem.getStyle('display') == 'block' && i != j) {
                            var height = parseInt(elem.getStyle('height'));
                            var timeID2 = setInterval(function() {
                                height -= 20;
                                if (height > 0) {
                                    elem.setStyle({'height': height + 'px'});
                                } else {
                                    elem.setStyle({height: '0px'});
                                    elem.previous().setStyle({backgroundColor: '#EEE'});
                                    elem.hide();
                                    clearInterval(timeID2);
                                }
                            }, 15);
                        }
                    });
                }, 500);
                triggerObj.observe('mouseout', function() {
                    if (event.element().next('dd').getStyle('display') == 'none')
                        event.element().setStyle({'backgroundColor': '#EEE'});
                    clearTimeout(timeID);
                });
            });
        });
    }
});

document.observe('dom:loaded', function(event) {
    new Accordion($$('#menu dl dd'));
});

わざわざクラスを作っているが結局メソッドはコンストラクタ一つだけだった。 下記がサンプル。
タイトル部分にマウスをあわせて0.5秒経過した時点で処理が始まる