Gantry 5 Particles - Documentation

Using Accordion particle, you can create FAQs, categorised contents on same page, product documentation and features with drag and drop layout, 3 in-built styles, 2 border styles, padded content option, question/title icon, icon rotation on default and active questions, expand on hover and click, animations, unlimited questions and answers, Custom HTML etc.

Installation:

Note: Check your theme's existing particles first. If you already have this particle there, then skip this installation unless you need to update to a latest version.

1. Download Accordion particle from particles download area of RcaTheme.com
2. Unzip/Extract the particle zip file on your PC and open the folder
3. Copy  particles and r-elements folders to-
   1.  On Joomla: ROOT/templates/DEFAULT_TEMPLATE/ using an FTP client like FileZilla or using your cPanel File manager
   2.  On WordPress: ROOT/wp-content/themes/DEFAULT_THEME/
   3.  On Grav CMS:  ROOT/user/data/gantry5/themes/DEFAULT_THEME/
4. Now it will copy/create required directories and files for this particle. If you're updating this particle to a latest version you need to confirm on the replace warning notification.

Usage:

1. Read how to add particles to your website here. 
    

2. Basic

   
    

   1. CSS Classes: You can add CSS classes here, so you can customize/override existing styles with your own CSS.
   2. Content Padding: You can add css padding here and it will apply to this particle's content block.
   3. Content Margin: You can add CSS margin here and it will apply this particle's content block.
   4. Content Maximum Width: You can set a maximum width to this particle's content block. You can add maximum width with %/px/rem/em.
       

3. Header - Footer

   
    

   1. Header Title: You can add a Heading title for this particle.
   2. Heading Size: Select a Heading size- h1/h2/h3/h4
   3. Header - Custom HTML: You can add a Description on the header after the Heading title and as well as you can customize the description with custom HTML.
   4. Header Text Align: Select text align for Header title and description.
   5. Header Margin Bottom: You can set a CSS margin bottom value here for applying some space between your header and particle's contents.
   6. Footer - Custom HTML: You can add a description on the footer/after this particle's contents and as well as customize with custom HTML.
       

4. Settings

   
    

   1. Style: Select an style for accordion items.
   2. Style Default Border: Enable/Disable border on Style- Default.
   3. Style Default Title Bold: Whether or not bold the Question title on Style- Default.
   4. Style Default Content Paded: Enable/Disable extra padding on Answer texts on Style- Default
   5. Accordion Icon: Select an Icon if you want show before/after the Question text.
   6. Rotate Active Icon: Select how your selected Icon will rotate on Active/expanded question(s).
   7. Active First Item: Whether your first accordion item will show as opened or not.
   8. Allow Multiple Open: If disabled, only one item can be expanded at a time and other active item will collapse. If enabled, expanded item won't collapse until you click.
   9. Open Accordion On: Open accordion items on Click or Hover
   10. Collapsible: Allow active sections to collapsible.
   11. Animation: Enable/Disable animation.
   12. Animation Duration: Set animation duration.

5. Contents

   
    

   1. Click on + button to create an item
   2. Add a name for this item and click on the item name to add contents.
       

   3. Add your contents for this item

      
       

      1. On the Question field, add your question or content title.
      2. On the Answer field, add answers for the question.
      3. Click on Apply.
6. Follow step #4 for adding as many items as you need.