SSL Labs ScoreSecurityHeaders.io ScoreHSTS Preloaded

MooAccordion - Simple Usage

Article Index

Simple Usage:

The plugin itself will operate quite well without a {content-mooaccordion} tag. One caveat when creating accordion content using the Javascript article editor is that your individual elements may end up wrapped in <p> tags. Avoid this by creating your accordion content within a <div>.

<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>
Accordion Label 1

Accordion Content 1 ...

Accordion Label 2

Accordion Content 2 ...

Accordion Label 3

Accordion Content 3 paragraph 1 ...

Accordion Content 3 paragraph 2 ...

MooAccordion locates all items with the mooaccordion class and puts them into a common container with each label containing the click activation for the accordion effect.

The label and content tags are not important. Note content 3 contains 2 paragraphs. In order to associate both paragraphs with the accordion label, they are both contained within a div tag. This is done because the plugin identifies the 1st tag following the accordion label as the accordion content.