Accordion

Quickly provide your content with a full fletched and fine-tuned accordion component with grouping capabilities

Class type: Component

Dependencies

• Component 1.0.0

Getting started

Query your element in js and pass it to the constructor as an option.

const accordion = new Accordion ({
    el:     accordionElement,
    group: 'accordionGroupName'
});

Use the following html for your accordion so the Class can tap into the DOM

<div class="accordion">
  <div class="accordion-inner">
    <h4>
        <a href="#" class="accordion-titleWrapper">
            <span class="accordion-title">Title</span>
            <svg class="icon icon--svg accordion-arrow"><use xlink:href="#arrow--down"></use></svg>
        </a>
    </h4>
    <div class="accordion-contentWrapper">
        <div class="accordion-content">
          ...
        </div>
    </div>
  </div>
</div>

Add css import to get basic styling

@import 'minsky-accordion/css/accordion';

Constructor Parameters

args

Type: Object Default: {}

Config options that will be used when instance is created

objectName

Type: String Default: 'Component'

Object name that will be used as recognisable identifier and as prefix in logs

Interface

Options

el

Type: DomElement Default: null

Element to use by the instance

group

Type: String Default: ''

Group the accordions so that they take each other into consideration, keeping just one open without requiring the user to close the others

hash

Type: String Default: ''

Hash to look for into the url, if present => set accordion open on pageload/creation.

isOpen

Type: Boolean Default: false

Sets the initial open-state

Properties

option 1

Type: [ Data type ] Default: [ Default value ]

[ Explanation ]

Methods

open

Parameters: hard:Boolean Return: undefined

Opens the accordion, hard mode opens the element without animation

close

Parameters: hard:Boolean Return: undefined

Closes the accordion, hard mode closes the element without animation

toggle

Parameters: forceState:hard:Boolean Return: undefined

Toggles the accordion, hard mode closes the element without animation. A state can be forced as well.

refresh

Parameters: none Return: undefined

Refreshes the accordion in case the contents change it’s size

destroy

Parameters: none Return: undefined

(should) Destroys the instance

To Do

• Make some undocumented properties private
• Add missing destroy logic