The System-RSTemplate! plugin brings in some pre-defined, fully customizable stylized containers. It gets installed along with the template, and should be published automatically. If you are to experience any issues with this feature, first make sure to check that the plugin didn't get unpublished for whatever reason.

To access the Shortcodes feature, click on the button found at the bottom side of the text editor that you are using (available for Joomla! Content articles, Custom HMTL modules, etc. ). This functionality is employed through the Button - RSTemplate! Shortcodes plugin which also gets installed along with the template and is published automatically. If the button does not show up in your editor, make sure that the plugin didn't get unpublished.

In this article we will provide explanations for the Accordion effect, including information such as: the elements it includes (title, items with headers and text), a screenshot with its default appearance, a shortcode example and how to edit each element.

Simple accordion

The Accordion effect offers a customizable number of items, each displaying an additional text description when clicked on (through an accordion animation). Only a single item's description can be displayed at a time and there are 2 styles available for use: Dark and Light.

• Title: The box's title
• Item Header: The accordion item's header, click on it to display the text
• Item Text: The accordion item's text

In the text area below you can find a code example for the accordion effect. The first image in the gallery above illustrates a preview of the result, the second displays the alternative Light style.

Shortcode:

<div id="enter_the_title6579" class="rstpl-accordion-dark"> <h3 class="rstpl-box-title"> Enter the title </h3> <div class="clearfix"> </div> <div class="rstpl-box-accordion"> <div id="enter_the_title7252" class="accordion"> <div class="accordion-group"> <div class="accordion-heading"> <a href="#_accordion_header_11286" data-parent="#enter_the_title7252" data-toggle="collapse" class="accordion-toggle"><i class="icon-play3 pull-left"></i> Accordion Header 1</a> </div> <div class="accordion-body collapse in" id="_accordion_header_11286"> <div class="accordion-inner"> This is sample content. In order to change this text please type in the text box the content you wish to be displayed. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a href="#_accordion_header_25195" data-parent="#enter_the_title7252" data-toggle="collapse" class="accordion-toggle collapsed"><i class="icon-play3 pull-left"></i> Accordion Header 2</a> </div> <div class="accordion-body collapse" id="_accordion_header_25195"> <div class="accordion-inner"> This is sample content. In order to change this text please type in the text box the content you wish to be displayed. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a href="#_accordion_header_35625" data-parent="#enter_the_title7252" data-toggle="collapse" class="accordion-toggle collapsed"><i class="icon-play3 pull-left"></i> Accordion Header 3</a> </div> <div class="accordion-body collapse" id="_accordion_header_35625"> <div class="accordion-inner"> This is sample content. In order to change this text please type in the text box the content you wish to be displayed. </div> </div> </div> </div> </div> </div>

How to edit the items

Each item can be edited by right-clicking on it and choosing Edit. The possibility to delete them is also available, by clicking on Remove.

Editing the accordion's Title:

Editing an accordion item's Header:

Editing an accordion item's Text:

You Should Also Read

Box

Carousel

Tabs

Adding Shortcodes within Bootstrap Grid System