PLG_CONTENT_MOOACCORDION="Content - MooAccordion" PLG_CONTENT_MOOACCORDION_XML_DESCRIPTION="

MooAccordion

This plugin searches for the existence of the 'mooaccordion' class and renders clickable headings for collapsable "accordion" content.

Each item found with the mooaccordion class is paired with the tag immediately following it.

Simple Usage:

<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>

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.

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).

Nested Usage:

<div>
  <strong class=\"mooaccordion\">Accordion Level 0.1</strong>
  <div>
    <strong class=\"mooaccordion\">Accordion Level 1.0.1</strong>
    <div>
      <strong class=\"mooaccordion\">Accordion Level 3.1.1</strong>
      <div>Level 3 - item 1</div>
    </div>
    <strong class=\"mooaccordion\">Accordion Level 1.0.2</strong>
    <div>Level 2 - item 2</div>
    <strong class=\"mooaccordion\">Accordion Level 1.0.3</strong>
    <div>Level 2 - item 3</div>
  </div>
  <strong class=\"mooaccordion\">Accordion Level 0.2</strong>
  <div>Level 1 - item 2</div>
  <strong class=\"mooaccordion\">Accordion Level 0.3</strong>
  <div>
    <p>Level 1 - item 3 - paragraph 1<p>
    <p>Level 1 - item 3 - paragraph 2<p>
  </div>
</div>

Using the plugin tag

{content-mooaccordion [OPTIONS]}

One plugin tag within the content per accordion group to be modified. Groups with no modifications will be displayed with defaults. It is not necessary to include plugin options for every accordion group that you intend to be displayed with defaults.

Examples

<div id=\"myaccordionid\">
  <strong class=\"mooaccordion\">Accordion Label 1</strong>
  <div>Accordion Content 1 ...</div>
  <strong class=\"mooaccordion\">Accordion Label 2</strong>
  <div>Accordion Content 2 ...</div>
  <strong class=\"mooaccordion\">Accordion Label 3</strong>
  <div>
    <p>Accordion Content 3 paragraph 1 ...</p>
    <p>Accordion Content 3 paragraph 2 ...</p>
  </div>
</div>

Important Notes

  1. Accordion labels will contain the mooaccordion class and will also contain mooaccordionN (where N is the number of the accordion group)
  2. Toggler icons will always have a class 'mooaccordionicon' and be found as the first child of the outermost tag of the toggler element.
  3. Accordion groups not customized will receive a 'mooaccordiondefaulttoggle' class.
  4. Accordion content may appear strange if content or toggler items are different types. For example, the first content is a p and the second is a div - the first may not fully collapse due to p margins where the div has none. The solution is to wrap all content in a common tag (div is recommended). Both examples above illustrate this behavior if your template has assigned a margin to the p tag.
" PLG_CONTENT_MOOACCORDION_DEFAULT_STYLE_LABEL="Default CSS" PLG_CONTENT_MOOACCORDION_DEFAULT_STYLE_DESC="

Styling to be applied to accordion elements.

Special tags indicate text that should be replaced with corrected values: {root} = Joomla Root (convenient if your site is in a subfolder of your domain). Need others? Make a request.

Styling with your template? Leave this textarea blank.

"