Closed simondate closed 3 years ago
Hi @simondate,
Accordion icons can be changed very quickly and easily in v5. Though the js does target and change the states from is-closed
to is-open
the application of the icons to these states are done via CSS rather than HTML Classes directly applied to the item.
For example:
.accordion {
&__item-btn.is-closed .icon {
.icon-plus;
}
&__item-btn.is-open .icon {
.icon-minus;
}
}
Copy the above to your theme and replace the icon definition by using another from the standard Adapt icon font set - list of icons can be viewed here.
This can also be done in the Authoring Tool by copying the above, amending as desired, and adding it to the 'Custom CSS/LESS code' text area in the project settings page.
The accordion component currently uses two icons for open and closed state. The icons are shown and hidden with Jquery here. If you wish to use different icons it requires either modifying the JS or overriding the class name within the component.
It would be nicer if there was an easier way to chose the icons. This could either be done in Handlebars by including an active attribute in the model that changes the icon or in the JSON itself by having two new attributes.