Accordioncomponent

This component required metro-accordion.js.

Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Item #2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Item #2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Item #2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

tab2

Any components as content

Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

  • Item 1
  • Item 2
  • Item 3
Microsoft.com
Legend Label name
Label name

First Tab

Second Tab

Rocket Tab

This tab placed right

This tab also placed right

Accordion in accordion
Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Item #2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Item #2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Item #2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Custom accordion item heading
Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Item #2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Item #2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Item #2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

Item #3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

<div class="accordion" data-role="accordion">
    <div class="accordion-frame">
        <a href="#" class="heading">Frame heading</a>
        <div class="content">...</div>
    </div>
    <div class="accordion-frame">...</div>
    <div class="accordion-frame">...</div>
</div>

If you want to activate a specific tab of accordion, you must add class active to heading of frame. If you want to use accordion with marker open/close, you must add class with-marker to accordion. 

<div class="accordion" data-role="accordion">
    <div class="accordion-frame">
        <a href="#" class="heading">Frame heading</a>
        <div class="content">...</div>
    </div>

    <div class="accordion-frame">
        <a href="#" class="active heading">Frame heading</a>
        <div class="content">...</div>
    </div>
    
    <div class="accordion-frame">
        <a href="#" class="heading">Frame heading</a>
        <div class="content">...</div>
    </div>
</div>

<div class="accordion with-marker" data-role="accordion">
    ...
</div>

Using

You can activate component manually or auto with data-* api.

Activate component with Javascript

$("#componennt_id").accordion({
    closeAny: boolean, //true or false. if true other frames (when current opened) will be closed
    open: function(frame){}, // when current frame opened this function will be fired
    action: function(frame){} // when any frame opened this function will be fired
});

Activate component with data-api

<div class="accordion" data-role="accordion" data-closeany="...">...</div>