Pre-Requirements

1. Install and enable Core Design Scriptegrator plugin.

1. Visit Scriptegrator plugin configuration and set the "Load jQuery to" option to "Site".

The setup

1. Install the plugin using Joomla! 1.5 installer.
2. Open plugin configuration and set your default settings like style, animation, border...
3. Open your article to edit and insert the following notation (default pattern):

   Manually mode:
     {accordion}
       My first title ::
         My first text.
       ||||
       My second title ::
         My second text.
     {/accordion}
   
   ID mode:
     {accordion}127:128:129{/accordion}
   
     Explication: Process the three articles with ID 123, 155 and 22.
     More articles separate with ":"  - colon.

   The number means your article ID. To more article usage please separated the ID's with ":" (colon).

   TIP: The Core Design Insert Article ID usage make your work just simpler.

The default settings in plugin configuration can be overwritten by the settings specified by each accordion. Please write the following attributes to the "{accordion...}" attribute. The allowed settings:

• mode. Support to choice between "id" and "manually" mode to create your accordion.
  • mode="manually" (default)
  • mode="id"

• id. Adds custom ID for more tabs in one article (optional, automatically). The allowed characters are 0-9, a-z, A-Z.
  • id="mytab" (for example)

• uitheme. Depends on themes available in plugin configuration (based on jQuery UI ThemeRoller).
  • uitheme="smoothness"
  • uitheme="vader"
  • ...

• box. Adds possibility to set the CSS style for the "box" arround the accordion. That's the very good option for accordion width, border, padding or background images etc. Use CSS notation.
  • box="width: 300px"
    Create an accordion with specified width.
  • box="border: 1px solid gray"
    Create the accordion with the border (gray color).
  • box="background: url('images/my_image.png') top left no-repeat"
    Create the accordion with specified image on background.

• select. Article select. The number of selected item.
  • select="1"
    The first tab was marked as active.
  • select="2"
  • The second tab was marked as active.

• event. Accordion event. The event on which to trigger the accordion.
  • event="click"
  • event="mouseover"

• animated. Choose your favorite accordion animation.
  • animated="none"
  • animated="slide"
  • animated="bounceslide"

• autoheight. Enables the autoheight option, setting the height of the biggest element in the accordion to all its other elements.
  • autoheight="true"
  • autoheight="false"

• spacebetween. Space between accordion items. The align for your tabs (to left or to right side) The allowed units are px, % and em.
  • spacebetween="5px"
  • spacebetween="1em"
  • spacebetween="10%"