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

function expandCollapse(){
    //for expand all html, make a div with an id of "expand"
    $('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();
    });
    //for collapse all html, make a div with an id of "collapse"
    $('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();
    });
}

//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('color', '#0000CC'); }, // THE PERCENTAGES CONTROL POSITION!!!
		onBackground: function(toggler) { toggler.setStyle('color', '#4F708D'); }
	});
	expandCollapse(); //this initiates the expand/collapse function into memory.
	
	//make it open on hover  
	//$$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });  
});