Maccordion is a jQueryUI plugin, similar to jQuery UI Accordion but allows more than one content panel to be opened at the same time.

Options: disabled, active, effect, options, easing, speed, heightStyle, event, header, icons.

Methods: destroy, disable, enable, option, widget, refresh.

Events: create, beforeActivate, activate.

• UI Core
• UI Widget
• UI Effects Core + UI Effects Blind if "effect" option is used.

Minified Maccordion is stored on SkyDrive.

bool disabled : false (example)

Disables (true) or enables (false) the maccordion. Can be set when initializing the maccordion.

//Initialization
$( ".selector" ).accordion({ disabled: true });

//Set
$( ".selector" ).accordion( "option", "disabled", true );

mixed active : 0

number (example) Toggles tab. Supports negative numbers (works like jQuery .eq())

$( ".maccordion" ).maccordion( "option", "active", -2  );

array Toggles tabs. Doesn't support negative numbers.

// opens first and second tabs
$( ".maccordion" ).maccordion( "option", "active", [0, 1] );

bool : true Opens all tabs. Only for opening.

$( ".maccordion" ).maccordion( "option", "active", true );

bool : false Closes all tabs.

$( ".maccordion" ).maccordion( "option", "active", false );

string : "toggle" (example) Toggles all tabs.

$( ".maccordion" ).maccordion( "option", "active", "toggle" );

object : jQuery (tab's headers) (example) Toggles tabs.

$( ".maccordion" ).maccordion( { active: false } );

$( ".maccordion" ).maccordion( "option", "active", $( ".maccordion .dattaya-maccordion-header" ) );

string effect : blind

For this to work, JQuery UI Effects Core and an effect one want to use are required. Supports effects that can be used with toggle function. jQuery UI Effects - Examples, Descriptions

$( ".maccordion" ).maccordion( "option", "effect", "fade" );

object options : {} (example)

An object/hash including specific options for the effect. Effects and their options

string easing : swing

Effect related. Name of a function to perform easing of the animation. (Easing showcase)

string speed : normal

Duration of the effect.

string heightStyle : auto

false Content panes height will be according to the height of inner content.

auto If set, the highest content part is used as height reference for all other parts.

string event : click (example)

Specifies the event used to toggle a maccordion tab.

$( ".maccordion" ).maccordion( "option", "event", "mouseenter click" );

string header : "> li > :first-child,> :not(li):even"

Selector for the header element.

object icons : { activeHeader: "ui-icon-triangle-1-s", header: "ui-icon-triangle-1-e" } (example)

Icons to use for headers. (jQueryUI icons)

$( ".maccordion" ).maccordion( {
    icons: {
        activeHeader: "ui-icon-minus",
        header      : "ui-icon-plus"
    } 
} );

This event is triggered when a maccordion is created.

$( ".maccordion" ).maccordion({
    create: function(event) { ... }
});

or

$( ".maccordion" ).bind("maccordioncreate": function(event) { 
    ... 
});

Triggered when the maccordion is about to change.

$( ".maccordion" ).bind("maccordionbeforeActivate": function(event, data) { 
    data.toggled // headers of the content panels that are going to be toggled.
});

Triggered when the maccordion has been changed.

$( ".maccordion" ).bind("maccordionactivate": function(event, data) {
    data.toggled // headers of the content panels that have been toggled.
});

Removes the maccordion functionality completely. This will return the element back to its pre-init state.

Disables the maccordion.

Enables the maccordion.

Gets or sets any maccordion option. If no value is specified, will act as a getter.

Returns the .dattaya-maccordion element.

Recomputes heights of tabs, adds/removes tabs.

Adding a tab dynamically (playground):

$( ".maccordion" ).maccordion()
    .append( "<h3><a href=\"#\">Fourth header</a></h3><div>Fourth content</div>" )
    .maccordion( "refresh" );

Removing a tab dynamically (playground):

$( ".maccordion" ).maccordion()
    .children( ":first" )
        .next()
        .andSelf()
            .remove();

$( ".maccordion" ).maccordion( "refresh" );

Maccordion uses jQuery UI CSS Framework. Use ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes that can be modified (all classes bellow):

<div class="dattaya-maccordion dattaya-maccordion-icons">

    <!--Opened tab-->
    <h3 class="dattaya-maccordion-header dattaya-maccordion-header-active">
        <span class="dattaya-maccordion-header-icon"></span>
        <a href="#" class="dattaya-maccordion-heading">Header</a>
    </h3>
    <div class="dattaya-maccordion-content dattaya-maccordion-content-active">Content</div>

    <!--Closed tab-->
    <h3 class="dattaya-maccordion-header">
        <span class="dattaya-maccordion-header-icon"></span>
        <a href="#" class="dattaya-maccordion-heading">Header</a>
    </h3>
    <div class="dattaya-maccordion-content">Content</div>

</div>