MooTools accordion mouseover - mootools

Question

I saw on the internet a accordion with mootools. But this is a click-event. I want to have a mouseover for to open the accordion. I have tied, but it doesn't work.
Can someone help me? Thanks in advance
window.addEvent('domready', function()
{
var myAccordion = new Accordion
(
$('accordion'), 'div.toggler', 'div.element',
{
opacity: false,
display: 0,
alwaysHide: true,
// WHEN A PART IS OPEN
onActive: function(toggler, element)
{
toggler.setStyle('color', '#FF4A6F');
},
// WHEN A PART IS CLOSED
onBackground: function(toggler, element)
{
toggler.setStyle('color', '#585858');
}
// END ACCORDION H3, DIV.ELEMENT
}
// END VAR NEW ACCORDION
);
// END FUNCTION
});
my html:
<div id="homeBox_img">
<div id="slideshow-container">
<img src="img/image1.jpg" width="345" height="301" alt="introducing img" />
<img src="img/image2.jpg" alt="introducing img" />
<img src="img/image3.jpg" width="345" height="301" alt="introducing img" />
</div>
</div>

Answer 1

To build an accordion successfully, there must be the collection of toggler elements ( like h2 elements in example below ), and the collection of content elements ( '.content' ). I do not see what html that you have added has to do with the script, but here is an basic example where the change of elements is triggered with 'mouseenter' event.
JS:
new Fx.Accordion(
'#accordion h2', '#accordion .content', { trigger: 'mouseenter' }
);
HTML:
<div id="accordion">
<h2>image1</h2>
<div class="content">
<img src="img/image1.jpg" width="345" height="301" alt="introducing img" />
</div>
<h2>image2</h2>
<div class="content">
<img src="img/image2.jpg" width="345" height="301" alt="introducing img" />
</div>
<h2>image3</h2>
<div class="content">
<img src="img/image3.jpg" width="345" height="301" alt="introducing img" />
</div>
http://mootools.net/docs/more/Fx/Fx.Accordion#Fx-Accordion
http://mootools.net/demos/?demo=Accordion