NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
english:phpwcms-system:article:contentparts:register-tabs:accordion-tabs [2010/06/18 10:09] Knut Heermann (flip-flop) |
english:phpwcms-system:article:contentparts:register-tabs:accordion-tabs [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 53: | Line 53: | ||
| ---- | ---- | ||
| \\ | \\ | ||
| - | \\ | + | ~~UP~~ |
| ===== Description ===== | ===== Description ===== | ||
| Line 129: | Line 129: | ||
| \\ | \\ | ||
| - | Other possible settings can be found here: [[http://mootools.net/docs/more/Fx/Fx.Accordion]] | + | Other possible settings can be found here: [[http://mootools.net/docs/more/Fx/Fx.Accordion|Class: Fx.Accordion]] |
| - | E.g. to close the open block again: | + | E.g. to be able to close the active block by clicking on himself again: |
| <code js> | <code js> | ||
| Line 138: | Line 138: | ||
| \\ | \\ | ||
| + | |||
| + | **Example:** ... how to make each accordion item open when the user **hovers** over the item **instead of** making the user **click** ... -> [[http://davidwalsh.name/mootools-accordion-hover-event|David Walsh Blog]] | ||
| + | <code js |h mootools.AccordionTabs.js |h > | ||
| + | /* MooTools V1.2 */ | ||
| + | window.addEvent('domready', function() { | ||
| + | |||
| + | //create our Accordion instance | ||
| + | var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', { | ||
| + | opacity: false, alwaysHide: true, show: -1, | ||
| + | onActive: function(toggler, element){ | ||
| + | toggler.addClass('accordion-selected'); | ||
| + | }, | ||
| + | onBackground: function(toggler, element){ | ||
| + | toggler.removeClass('accordion-selected'); | ||
| + | } | ||
| + | }); | ||
| + | //make it open on hover | ||
| + | $$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); }); | ||
| + | }); | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ~~UP~~ | ||
| ==== Template ==== | ==== Template ==== | ||
