Customizing Toggle (Accordion) Headings

In a recent project and for this site’s new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

Since it is unlikely this would be appropriate for every toggle element, simply assign a class to the toggle element — in this example, I used main-menu__accordion. The targeted elements are the panel-heading and the fusion-toggle-heading with the latter reducing the space between the text and the icon.

.main-menu__accordion .panel-heading {
  display:flex!important;
}
.main-menu__accordion .fusion-toggle-heading{
  margin-right: 16px!important;
}