Scrolling w/mo in accordion

by sanford

HTML

<div class="acchandle">handle</div>
<div class="wrapper">
    <div class="scrollable">
    <div class="scroll-arrow dummy">&nbsp;</div>
        <div class="text-block">Lorem ipsum1</div>
        <div class="text-block">Lorem ipsum2</div>
    <div class="scroll-arrow down">&nbsp;</div>
        <div class="scroll-arrow nonevent">&nbsp;</div>
        <div class="text-block">til the breaka1</div>
        <div class="text-block">til the breaka2</div>
    <div class="scroll-arrow down">&nbsp;</div>
    <div class="scroll-arrow nonevent">&nbsp;</div>
    <div class="text-block">breakadawn1</div>
    <div class="text-block">breakadawn2</div>
<div class="scroll-arrow down">&nbsp;</div>
<div class="scroll-arrow nonevent">&nbsp;</div>
    <div class="text-block">uh huh yeah</div>
<!--<div class="scroll-arrow up">&nbsp;</div>-->
    </div>
</div>
<div class="acchandle">handle</div>
<div class="wrapper">
    <div class="scrollable">
    <div class="scroll-arrow dummy">&nbsp;</div>
        <div class="text-block">Lorem ipsum1</div>
        <div class="text-block">Lorem ipsum2</div>
    <div class="scroll-arrow down">&nbsp;</div>
        <div class="scroll-arrow nonevent">&nbsp;</div>
        <div class="text-block">til the breaka1</div>
        <div class="text-block">til the breaka2</div>
    <div class="scroll-arrow down">&nbsp;</div>
    <div class="scroll-arrow nonevent">&nbsp;</div>
    <div class="text-block">breakadawn1</div>
    <div class="text-block">breakadawn2</div>
<div class="scroll-arrow down">&nbsp;</div>
<div class="scroll-arrow nonevent">&nbsp;</div>
    <div class="text-block">uh huh yeah</div>
<!--<div class="scroll-arrow up">&nbsp;</div>-->
    </div>
</div>

CSS

body {padding:100px;}

div div {
    transition: margin-top 800ms ease-in 0;
    -moz-transition: margin-top 800ms ease-in 0;
    -webkit-transition: margin-top 800ms ease-in 0;
}
.scrollable {
    width: 200px; font: 12px/12px Verdana;
    ZZpointer-events:none;
}
.wrapper {
    height: 130px; width: 200px; overflow: hidden;
    border: 1px solid gray;
}
.scroll-arrow {
   font: 12px/12px Verdana;
    border: 1px solid transparent;
    color: beige;
    cursor:pointer;
    width:100%;
    position:relative;
    background-repeat: no-repeat;
    background-position: 50%;
}
.scroll-arrow.up, .scroll-arrow.down {
        border: 1px solid silver;
        z-index: 20;
    opacity: 1;
    height: 15px;
    background-color: lightgreen;
}
.scroll-arrow.down{
background-image: url(data:image/gif;base64,R0lGODlhCgAKAKIAADMzM97e3rGxsf/M/2ZmZv///wAAAAAAACH5BAEHAAMALAAAAAAKAAoAAAMgODpE+6QU91gIFN68yIbN1ijRdU0LIFwCUKltpQDukgAAOw==);
}
.scroll-arrow.up{
    background-image: url(data:image/gif,GIF89a%0A%00%0A%00%A2%00%00333%DE%DE%DE%B0%B0%B0fff%FF%CC%FF%FF%FF%FF%00%00%00%00%00%00!%F9%04%01%07%00%04%00%2C%00%00%00%00%0A%00%0A%00%00%03%1FHJ3%FB%A3%14%07K%08s%0Dq%AF%A0%40x%85%00tQf%80j%E7%A3l%9F%AB%84O%02%00%3B);
}
.scroll-arrow.nonevent {
    z-index: 0;
    height: 15px;
    margin-top: -17px;
}
.scroll-arrow.nonevent.totop {
    z-index: 30;
}
    
.text-block {
    height: 50px;
    position: relative;
    z-index: 0;
}
.text-block:nth-child(2n+2) {
    background-color: lightgray;
}

JavaScript

Browser.ie9 || Browser.firefox36 || $$('.scroll-arrow.down').addEvents({'mouseenter':scroll});
$$('.scroll-arrow').addEvents({'click':scroll});
//$$('.scroll-arrow.
//$$('.scroll-arrow.up').addEvents({'mouseenter':goUp,'click':goUp});

function scroll(e){
    //console.log(e.target,e.relatedTarget);
    
    var wunderBar = this.hasClass('nonevent')
        ? this.getPrevious()
        : this;
    
    var offset = this.hasClass('down') || this.getPrevious().hasClass('down')
        ? -117 
        : 117;
    
    
    if ( this.hasClass('totop') && Math.sqrt(offset) ) {
        // offset += 17;
    } else if ( this.hasClass('totop') ) {
        //offset -= 17;
    }
    
    
    wunderBar.toggleClass('up'),wunderBar.toggleClass('down');

    this.getParent().getChildren('.nonevent').addClass('totop');
    this.getParent().setStyle('margin-top',
                         (this.getParent().getStyle('margin-top').slice(0,-2).toInt() + offset) + 'px'
                        );
    (function(){ this.removeClass('totop') }).delay(40,this);
}

$$('.scroll-arrow.nonevent').addEvent('mouseleave',function(){
            this.removeClass('totop');
});

var myAccordion = new Fx.Accordion ($$('.acchandle'),$$('.wrapper'),{
    fixedHeight:'130px'
});