Skip to content

Latest commit

 

History

History
47 lines (27 loc) · 1.72 KB

readme.md

File metadata and controls

47 lines (27 loc) · 1.72 KB

contentAccordion

Summary

A plugin for creating an accordion style content viewer.

Options

Option Description
indexOfOpenItem default is set to 0. This number dictates which 'panel' is open by default. The 'panel' numbering starts with 0.
maintainState boolean; default is set to false. If set to true the accordion will maintain it's state (which panel is open) on refresh.

The Markup

The markup for this component is in contentAccordion.jade. The title for each accordion item is held in an array within the contentAccordion.jade file. That array is also responsible for the number of sections within the accordion.

Implementing

###Jade

When using Jade, make sure the index.jade file has the include that references your contentAccordion.jade file.

include contentAccordion

###HTML

The content for the various sections is compiled from jade into the .html file.

###CSS

Make sure to add the .css that is generated from the .scss file to the stylesheet that is associated with your website.

###JavaScript

Make sure to add the minified version of contentAccordion.js to the javascript file that is already associated with your website. Also add the contentAccodion initializing function from the test.js file to your javascript file.

CSS

This CSS for this component is generated from Sass. The icon located to the far right of the title bar is a background base64 image. It is set to toggle when the accordion title bar is clicked.

Note

The content accordion does not support a persistent state function. If the page is refreshed then the default section (section 1) will be open.

The content produced from this component is Lorem Ipsum. You will not be asked to input 'live' content.