CODEWITHSUNDEEP
mootoolsaccordionmouseover
maichel
maichel

Reputation: 29

MooTools accordion mouseover

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>

Upvotes: 0

Views: 136

Answers (1)

Danijel
Danijel

Reputation: 12709

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

Upvotes: 1

Related Questions