search

adaptlearning / adapt_framework

A toolkit for creating responsive, accessible, multilanguage HTML5 e-learning courses.
https://www.adaptlearning.org/
GNU General Public License v3.0
572 stars 246 forks source link

contrib-accordion - different icons #1651

Closed simondate closed 3 years ago

simondate commented 7 years ago

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.

guywillis commented 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.