[SOLVED] Accordion onhover instead of onclick

[mechaflash]

Is there a way to make the accordion react on hover instead of on click? I created a custom module utilizing the accordion effect to a navigation and I would like to make the toggler element a link as well (so clicking on it will not be an option to open the sub-menu :D ). Noticed in the .tpl, the action is named 'domready' so I figure that would be the function to change... but to wut? or am I dead wrong? THANKS! :roll:

[Ruud]

I never use the standard Mootools scripts but the idea should be the same as it is for jQuery. You are most likely able to either change the .js files and replace the onclick handler for an onhover.

A better alternative would be to find out if you can write an additional script that simply adds an onhover action. You can see how to do this using the original js scripts for the accordion and use a Mootools reference guide to see what the onhover handler is called. Have the onhover function do the exact same as the onclick...

in jQuery it would look like:
$('.correct_classname').hover(function(){
$(this).click(); // call all onclick functions for this item.
});

Ok, it might seem like this is not of much help, but there isn't much more to type other then give you an exact step by step guide + code which isn't half as much fun! Some effort required for greater satisfaction...

[mechaflash]

Learning about CMSs, HTML, and CSS is enough on my plate for now =D. Don't want to get into javascript just yet and I definitely don't understand the way javascript syntax works. This is the .tpl file coding

window.addEvent('domready', function() {
new Accordion($$('div.toggler'), $$('div.accordion'), {
alwaysHide: true,
display: false,
opacity: false

(added in display:false to hide the first accordion and it does not effect the function)
The prior post I stated it was 'domready' but I've found out that it just tells the script to perform function when parts of the page are loaded... so that's not it. I really don't see anything (out of common sense w/lack of knowledge in javascript) in this coding that tells the accordion to have the onclick effect... other than function() but what does that reference to?

[mechaflash]

ALRIGHT!!! Found a blog post of an easy way to induce hover over the toggler element:

//make the accordion
var accordion = new Accordion($$('.toggler'),$$('.element'), {
  opacity: 0,
  onActive: function(toggler) { toggler.setStyle('color', '#f30'); },
  onBackground: function(toggler) { toggler.setStyle('color', '#000'); }
});

//make it open on hover
$$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });

That is the original code from the blog site http://davidwalsh.name/mootools-accordion-hover-event

Now to make it work with Contao, this is what the input will be in moo_accordion.tpl:

<script type="text/javascript">
<![CDATA[//><!--
window.addEvent('domready', function() {
var accordion = new Accordion($$('.toggler'),$$('.accordion'), {
  opacity: 0,
  onActive: function(toggler) { toggler.setStyle('color', '#f30'); },
  onBackground: function(toggler) { toggler.setStyle('color', '#000'); },
  display: false,
  });
$$('div.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });
});
//--><!]]>
</script>

The code works beautifully!