"ARI Smart Content - Accordion" plugin creates accordions in Joomla! content. The plugin can be enabled/disabled and configured on "Extensions → Plugin Manager" page on Joomla! backend. Common information how to use "ARI Smart Content" applications plugins is here. {accordion} plugin tag is used for the plugin. The following code creates an accordion with three items which are defined manually:

{accordion}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/accordion}

As you can see accordion items are defined using {item}...{/item} code. {item} tag supports title attribute where title for the accordion item is defined. Any HTML code can be used between {item} and {/item} tags. It is possible to create nested accordions. The sample code below:

{accordion width="80%"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               The nested accordion below

               {accordion}

                       {item title="Sub-item 1"}

               This is the first item of child accordion

       {/item}

                       {item title="Sub-item 2"}

               This is the second item of child accordion

       {/item}

               {/accordion}

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/accordion}

One note, if you want to use nested accordions then set "Height" parameter to "Content" value in plugin settings or add heightStyle="content" attribute to {accordion} tag. It is also possible to create accordions based on data from Text data data sources. In this case use source attribute of {accordion} tag to define ID of the data source. For example you have created a data source (and ID of this data source is 5) which selects Joomla! articles from the selected categories and what to create an accordion based on these articles. Use the following plugin code:

{accordion source="5"}

{/accordion}

In this case accordion items titles and content will be formatted according to values of "Title template" and "Template" parameters from plugin settings. Possible to use itemTemplate and titleTemplate attributes of {accordion} tag to define custom formatters:

{accordion source="5" titleTemplate="{$title} [{$created}]" itemTemplate="{$introtext}"}

{/accordion}

Plugin settings

The following parameters can be defined on plugin settings page ("Extensions → Plugin Manager → ARI Smart Content - Accordion" page on Joomla! backend):

• Load method is used to specify load method on client side. If it is set to 'On Load', an accordion will be created when page and all resources (images, styles and etc.) are loaded by a browser. If it is set to 'DOM Ready', the accordion will be created immediately when page is loaded (it doesn't wait till all resources are loaded, they will be loaded in parallel). In other words, 'DOM Ready' event occurs before 'On Load' and if possible it is preferable to use it instead of 'On Load'.  This parameter can be useful to resolve conflict with some 3rd party extensions, if the extension doesn't work properly when it's set to 'DOM Ready', try to switch it to 'On Load'.

• Theme is used to specify the theme which will be used for accordions by default.

• Width is used to specify width which will be used for the accordions by default. Possible values: 500, 80% and etc.

• Height controls the height of the accordions and each panel. Possible values:

• Auto - all panels will be set to the height of the tallest panel.

• Fill - expand to the available height based on the accordion's parent height.

• Content - each panel will be only as tall as its content.

• Title template is used to create titles dynamically based on data from the selected data source. It is possible to use data source predefined variables (like {$title}, {$introtext} and etc.) and HTML code.

• Template is used to create content for accordion items dynamically based on data from the selected data source. It is possible to use data source predefined variables (like {$title}, {$introtext} and etc.) and HTML code.

• Default panel index is used to specify zero-based index of the panel which will be opened by default. Use 0 if want to open the first panel, 1 if want to open the second panel and etc. If you want to show all panels in closed state, set the parameter to -1 value and 'Collapsible' parameter to 'Yes'.

• Collapsible is used to specify whether all the sections can be closed at once. Allows collapsing the active section.

• Open panels on is used to specify the event that accordion headers will react to in order to activate the associated panel.

• Duration of the animation is used to specify duration of the animation in milliseconds. Possible values: 200, 750 and etc.

• Animation effect is used to choose an animation effect which will be used when active panel is changed.

Plugin code syntax

The following attributes can be used for {accordion} tag:

• active is used to override Default panel index parameter from plugin settings. For example if want to show the second item is opened by default into an accordion, use the following plugin code:

{accordion active="1"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/accordion}

or the following code if want to show all items in closed state:

{accordion active="-1" collapsible="1"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/accordion}

• collapsible is used to override Collapsible parameter from plugin settings. Possible values: 0 and 1. Use the following code if want to disable collapsing of active section:

{accordion collapsible="0"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/accordion}

• duration is used to override Duration of the animation parameter from plugin settings. Possible values: 200, 535 and etc. The following code set duration of the transition effect to 600 milliseconds:

{accordion duration="600"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/accordion}

• event is used to override Open panels on parameter from plugin settings. Possible values: click, mouseover. The following code open accordion items on mouse over:

{accordion event="mouseover"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/accordion}

• heightStyle is used to override Height parameter from plugin settings. Possible values: auto, content and fill. Height of each panel will be only as tall as its content with the following code:

{accordion heightStyle="content"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/accordion}

• fx is used to override Animation effect parameter from plugin settings. You can see each easing effect in action here. Possible values:

• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce
• swing

The following code set animation effect to easeInBack value:

{accordion fx="easeInBack"}

       {item title="Item 1"}

               This is the first item

       {/item}

       {item title="Item 2"}

               This is the second item

       {/item}

       {item title="Item 3"}

               This is the third item

       {/item}

{/accordion}