// This is a new function including options for expanding and collapsing

function expandCollapse(){
    //expand all
    $('expand').addEvent('click', function(){
        var myAccordion = new Accordion('.toggler', '.element', {
            onActive: function(toggler, element){
                toggler.setStyle('cursor', 'pointer');
            },
            onBackground: function(toggler, element){
                toggler.setStyle('cursor', 'pointer');
            }
        });
        myAccordion.showAll();
    });
    //collapse all
    $('collapse').addEvent('click', function(){
        var myAccordion = new Accordion('.toggler', '.element', {
            onActive: function(toggler, element){
                toggler.setStyle('cursor', 'pointer');
            },
            onBackground: function(toggler, element){
                toggler.setStyle('cursor', 'pointer');
            }
        });
        myAccordion.hideAll();
    });
}


// Same function but for the WIDE client needs accordion form

function expandCollapse2(){
    //expand all
    $('expand2').addEvent('click', function(){
        var myAccordion = new Accordion('.toggler2', '.element2', {
            onActive: function(toggler, element){
                toggler.setStyle('cursor', 'pointer');
            },
            onBackground: function(toggler, element){
                toggler.setStyle('cursor', 'pointer');
            }
        });
        myAccordion.showAll();
    });
    //collapse all
    $('collapse2').addEvent('click', function(){
        var myAccordion = new Accordion('.toggler2', '.element2', {
            onActive: function(toggler, element){
                toggler.setStyle('cursor', 'pointer');
            },
            onBackground: function(toggler, element){
                toggler.setStyle('cursor', 'pointer');
            }
        });
        myAccordion.hideAll();
    });
}


//In my window.addEvent functions I've added the expandCollapse() function - the key is to add one div with an id of expand, and one with and id of collapse into the accordion div


window.addEvent('domready', function() {
	var accordion = new Accordion($$('.toggler'),$$('.element'), {
		opacity: 0,
		onActive: function(toggler) { toggler.setStyle('background', 'transparent url("images/collapse.jpg") no-repeat top left'); },
		onBackground: function(toggler) { toggler.setStyle('background', 'transparent url("images/expand.jpg") no-repeat top left'); }
	});
	expandCollapse(); //this initiates the expand/collapse function into memory.
});

window.addEvent('domready', function() {
	var accordion = new Accordion($$('.toggler2'),$$('.element2'), {
		opacity: 0,
		onActive: function(toggler) { toggler.setStyle('background', 'transparent url("images/collapse.jpg") no-repeat top left'); },
		onBackground: function(toggler) { toggler.setStyle('background', 'transparent url("images/expand.jpg") no-repeat top left'); }
	});
	expandCollapse2(); //this initiates the expand/collapse function into memory.
});