Accordion

Accordion

A standard accordion displays collapsible content areas, great for presenting small bits of information in a nicely formatted way.

Props

The props needed for this component are listed and explained below:

• icon - This prop must be a string and will add the classname of icon-[icon], e.g. "icon-star"

• iconSelected - This prop must be a string, this is the icon that will be displayed on the accordion item that has been collapsed.

• onChange - This prop must be a function.

• className - This prop must be a string

• items - This prop must be an array of item objects. Inside each object you should have a _id, title and body. See an example of this below.

Example

<Accordion
	onChange={this.onChange}
	icon="plus"
	iconSelected="minus"
	items={this.state._items}
	className="accordion-component"
/>

//...React component
getInitialState: function() {
	return {
		_items: [
		    {
		        _id: 0,
		        title: "Accordion Title 1",
		        body: "Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source"
		    },
		    {
		        _id: 1,
		        title: "Accordion Title 2",
		        body: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
		    },
		    {
		        _id: 2,
		        title: "Accordion Title 3",
		        body: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
		    } 
		]
	}
},

onChange: function(item) {
	// Should handle item selected and visited
	_.each(this.state._items, function(accordionItem) {
		if (item != accordionItem) {
			accordionItem._isSelected = false;
		}
	});

	item._isSelected = !item._isSelected;
	item._isVisited = true;
	this.setState({_items: this.state._items});
},