/ Published in: jQuery
The containing object takes the class 'conc-scope'. This says that any 'conc-trigger' inside this object will open and close any 'conc-content'. This allows for greater flexibility with the markup.
We can also set a class of 'conc-exclusive' on the root (where we set the scope). This will ensure that as one concertina opens any other currently open ones will close. This is currently a bit crude in terms of the animation.
You can also set a class of conc-default on the root of any concertina that you want to be open as default when the page loads.
If you want to have a different label to show when the concertina is active, and again when it is inactive add the spans seen in the markup for the trigger.
Todo: make accessible by hiding triggers in screenreader and ensuring content is only visually hidden.
Mandatory:
.conc-scope
.conc-trigger
.conc-content
Optional
.conc-exclusive
.conc-default
.active-message
.inactive-message
We can also set a class of 'conc-exclusive' on the root (where we set the scope). This will ensure that as one concertina opens any other currently open ones will close. This is currently a bit crude in terms of the animation.
You can also set a class of conc-default on the root of any concertina that you want to be open as default when the page loads.
If you want to have a different label to show when the concertina is active, and again when it is inactive add the spans seen in the markup for the trigger.
Todo: make accessible by hiding triggers in screenreader and ensuring content is only visually hidden.
Mandatory:
.conc-scope
.conc-trigger
.conc-content
Optional
.conc-exclusive
.conc-default
.active-message
.inactive-message