Sliding accordion with pure JS and for loop

I've written a for loop, which should run through all accordions and their children, but I can't figure out why it's only working on the first object.

Fiddle Example

for (
    var i = 0,
    accordion = document.getElementsByClassName('accordion');
    i < accordion.length;
    i++
) {
    var accordion_section = accordion[i].children[i],
        accordion_key = accordion[i].children[i].children[0],
        accordion_bellow = accordion[i].children[i].children[1];

    function accordion_bellow_MarginTop( value ) {
        accordion_bellow.style.marginTop = value + 'px';
    }
    accordion_bellow_MarginTop( -accordion_bellow.offsetHeight );

    accordion_key.onclick = function() {
        if ( accordion_section.getAttribute('class' ) == 'active' ) {
            accordion_section.setAttribute('class', '');
            accordion_bellow_MarginTop( -accordion_bellow.offsetHeight );
        }
        else {
            accordion_section.setAttribute('class', 'active');
            accordion_bellow_MarginTop( 0 );
        }
        return false;
    }
}