SSL Labs Score

Log in to participate

There is no cost to join RicheyWeb, and membership is a requirement to submit bug reports and participate in the support forums.

× Extension Discussions

MooAccordion

More
1 year 3 months ago #60 by michael
michael created the topic: MooAccordion
This demo showcases the many features and options available with...

This demo showcases the many features and options available with the MooAccordion content plugin.  This is by no means a complete list of things you can do with it, but merely a primer into its capabilities.

Please enjoy the show.


 

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.


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>

Accordion Group 1

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

Accordion Group 2

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

It can get as complicated (and deep) as your brain can keep track of.

<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>
Accordion Level 0.1
Accordion Level 1.0.1
Accordion Level 3.1.1
Level 3 - item 1
Accordion Level 1.0.2
Level 2 - item 2
Accordion Level 1.0.3
Level 2 - item 3
Accordion Level 0.2
Level 1 - item 2
Accordion Level 0.3

Level 1 - item 3 - paragraph 1

Level 1 - item 3 - paragraph 2


Using the plugin tag

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.

  • id='cssid': HTML ID of the parent item which these settings will apply.
  • allowallclosed: Flags the accordion group to allow all items to be closed
  • display='number': Logical number of the item to be open by default. Note, the first item in an accordion list is 0.
  • openedclass='[classnames]': CSS classes applied to open accordion items.
  • closedclass='[classnames]': CSS classes applied to closed accordion items.
  • template='number': Pre-defined CSS template to be used on this accordion group. Using this feature overrides the openedclass and closedclass options. Three pre-defined templates are included with this plugin and are numbered 1, 2 and 3.

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>
  • {content-mooaccordion id='myaccordionid' allowallclosed}
    • This accordion will be displayed with defaults and all items will be hidden.
  • {content-mooaccordion id='myaccordionid' default='2'}
    • The third item will be opened on page load.
  • {content-mooaccordion id='myaccordionid' template='2'}
    • The 2nd template will be used
  • {content-mooaccordion id='myaccordionid' openedclass='mymooopenclass'}
    • 'mymooopenclass' will be added to the toggler class list when an item is opened. When the item is closed, the class will be removed.
  • {content-mooaccordion id='myaccordionid' closedclass='mymoocloseclass'}
    • 'mymoocloseclass' will be added to the toggler class list when an item is closed. When the item is opened, the class will be removed.
  • {content-mooaccordion id='myaccordionid' closedclass='mymoocloseclass' id='myaccordionid2' template='2'}
    • Customizing 2 accordions.

Please Log in or Create an account to join the conversation.

  • Not Allowed: to create new topic.
  • Not Allowed: to reply.
  • Not Allowed: to add attachements.
  • Not Allowed: to edit your message.
Kunena Forum