Accordion

Creating an Accordion

To supply the accordion with its contents, an options object is passed as a prop to the accordion. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 4 properties.

Required Props

• panelInfo (array): It must be an array of objects, with each object containing information for one accordion item. Each object must contain:
• id (number): Used to set the `id` of the accordion header and panel. If you will have more than one accordion in your application, be sure to continue the sequence of numbers instead of starting back at 1.
• panelContent (string): Sets text contents of the panel.
• headerTitle (string): Sets the title of the accordion section.
• headerLevel (number): Sets the aria-level for each header in the accordion. For information on deciding the appropriate value to be supplied, visit this ARIA webpage.

Optional Props

• styles (object): This property is an object with four assignable key/value pairs. The values must be strings, and the required key properties are:
• accordionHeaderStyle: sets the style attribute for each accordion header
• accordionPanelStyle: sets the style attribute for each accordion panel
• accordionItemStyle: sets the style attribute for each accordion item
• overallAccordionStyle: sets the style attribute for the accordion as a whole
• multiselectable (boolean): This will default to false. When set to true, the accordion can expand multiple panels at one time. When set to false, the accordion can expand only one panel at a time.

Example Options Object:

const accordionOptions = { 
  panelInfo: [
	{
	  id: 1,
	  panelContent: 'My first panel text.',
	  headerTitle: 'My first header title'
	},
	{
	  id: 2,
	  panelContent: 'My second panel text.',
	  headerTitle: 'My second header title'
	}
  ],
  headerLevel: 4,
  styles: {
	accordionHeaderStyle: 'Header styles string',
	accordionPanelStyle: 'Panel styles string;',
	accordionItemStyle: 'Item styles string',
	overallAccordionStyle: 'Accordion styles string'
  },
  multiselectable: false
}
					

Instantiating an accordion

<Accordion options={accordionOptions} />
					

Example Accordion: