Accessible Accordion 1.4

The Fx.Accordion class creates a group of Elements that are toggled when their handles are clicked. When one Element toggles into view, the others toggle out. Widget based on original Accordion plugin of Mootools More!



Details

Author
3i1a4o
Current version
1.4
GitHub
mashalla/accordion
Downloads
4868
Category
Widgets
Tags
Report
GitHub Issues

Releases


Dependencies

  • core:1.2.4/Element.Event/core: 1.2.4
  • _self_/_current_:
    • /Fx.Elements
    • core/1.3: '*'
    • more/1.2.4: Fx.Accordion
    • Core/MooTools

How to use

Create a new accordion by using this

var myAccordion = new Fx.Accordion(togglers, elements[, options]);

An example instance would be this

//create our Accordion instance
var myAccordion = new Accordion(document.id('accordion'), 'h3.toggler', 'div.element', {
    opacity: false,
    onActive: function(toggler, element){
        toggler.addClass('active');
    },
    onBackground: function(toggler, element){

        toggler.removeClass('active');
    }
});

The corresponding HTML could be something like this

<div id="accordion">
    <h3 class="toggler">History</h3>
    <div class="element">
    ...
    </div>
    <h3 class="toggler">Evidence of universal common descent</h3>
    <div class="element">
    ...
    </div>
    <h3 class="toggler">Examples of common descent</h3>
    <div class="element">
    ...
    </div>
</div>

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus