austinsand:roba-accordion

Colorful Blaze based accordion containers

meteor add austinsand:roba-accordion

Usage

RobaAccordion is chiefly 2 Blaze templates which interact with each other and can take some variables to influence their behavior:

RobaAccordionGroup

• This groups accordion sections together and automatically initializes any accordions inside it

RobaAccordion

• This is the accordion template
• Click the accordion header to toggle it

Basic example

This example will create 3 accordion sections, the 1st one will be sticky and shown by default:

{{#RobaAccordionGroup}}
    {{#RobaAccordion sticky=true display=true name="user-info" title="User Info"}}
      <h2>User Info</h2>
      <div>This user has a name.</div>
    {{/RobaAccordion}}
    {{#RobaAccordion display=true name="user-connections" title="User Connections" icon="glyphicon glyphicon-user"}}
      <h2>User Connections</h2>
      <div>This user has some friends.</div>
    {{/RobaAccordion}}
    {{#RobaAccordion name="user-data" title="User Data" cssClass="roba-accordion-purple"}}
      <h2>User Data</h2>
      <div>This user has some data.</div>
    {{/RobaAccordion}}
    {{#RobaAccordion title="Section 4" name="accordion-4" color="#ff5900"}}
      <h1>Hello</h1>
      <p>This section has more content</p>
    {{/RobaAccordion}}
{{/RobaAccordionGroup}}

Which produces this:

API

RobaAccordionGroup Template

The accordion group is fairly simple and only takes a single parameter to add an additional CSS class to it. Internally, this is useful for identifying which other sections to close upon activating a particular section.

cssClass (String)

• An optional css class (or classes, this is just passed as a string) to add to the accordion group element
• Default: null

RobaAccordion Template

The accordion template provides the bulk of the functionality and takes a few optional parameters.

color (String)

• The background color to use for this section
• Takes any valid css background-color value
• Default: null

cssClass (String)

• An optional css class (or classes, this is just passed as a string) to add to the accordion's outer-element
• Default: null

display (Boolean)

• If set to true, this accordion setion will be shown when the page is rendered
• You can set this to true for multiple sections and they will all be shown on initial render
• Default: null

icon (String)

• A css class string to use to set an icon on a span
• Works well with Glyphicons (see example above)
• Default: null

name (String)

• This is the name of the section and will be set in the data-accordion-name attribute of the outer section
• Setting this will make it easier to activate & deactivate sections programatically
• Default: null

sticky (Boolean)

• If this is set to true, this accordion will not close when another accordion opens, and opening or closing this section will not cause the other sections to open or close
• Default: null

title (String)

• This is the title to display for the section
• Default: null

RobaAccordion

import {RobaAccordion} from 'meteor/austinsand:roba-accordion';

RobaAccordion.init(instance)

• It is only necessary to call this if you are not using the RobaAccordionGroup template
• Call this from the onRendered function of your parent template

Template.YourTemplate.onRendered(() => {
  let self = Template.instance();
  RobaAccordion.init(self);
});

Instance (TemplateInstance)

• The template instance that contains the accordion group