Colorful Blaze based accordion containers

meteor add austinsand:roba-accordion@=1.0.1



Colorful Blaze based accordion containers

meteor add austinsand:roba-accordion


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


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


  • 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:

    {{#RobaAccordion sticky=true display=true name="user-info" title="User Info"}}
      <h2>User Info</h2>
      <div>This user has a name.</div>
    {{#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 name="user-data" title="User Data" cssClass="roba-accordion-purple"}}
      <h2>User Data</h2>
      <div>This user has some data.</div>
    {{#RobaAccordion title="Section 4" name="accordion-4" color="#ff5900"}}
      <p>This section has more content</p>

Which produces this:


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


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


  • 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();
Instance (TemplateInstance)
  • The template instance that contains the accordion group