MooAccordion - Advanced Usage

Advanced Usage

<div>
  <h2>Accordion Group 1</h2>
  <strong class="mooaccordion">Accordion Label 1</strong>
  <p>Accordion Content 1 ...</p>
  <strong class="mooaccordion">Accordion Label 2</strong>
  <p>Accordion Content 2 ...</p>
  <strong class="mooaccordion">Accordion Label 3</strong>
  <div>
    <p>Accordion Content 3 paragraph 1 ...</p>
    <p>Accordion Content 3 paragraph 2 ...</p>
  </div>
</div>
<div>
  <h2>Accordion Group 2</h2>
  <strong class="mooaccordion">Accordion Label 1</strong>
  <p>Accordion Content 1 ...</p>
  <strong class="mooaccordion">Accordion Label 2</strong>
  <p>Accordion Content 2 ...</p>
  <strong class="mooaccordion">Accordion Label 3</strong>
  <div>
    <p>Accordion Content 3 paragraph 1 ...</p>
    <p>Accordion Content 3 paragraph 2 ...</p>
  </div>
</div>

MooAccordion is capable of implementing multiple accordion groups. Groups are created based on their parent element. All elements with the mooaccordion class are associated with their parent item. Each parent is then processed with a unique accordion group.

In order to implement multiple groups, the grouped items must be contained within different parent elements. The example above will create 2 independent groups of accordion items. In this case, 2 items can be open simultaneously (1 from each group).