Bricks Accordion (Nestable) Element’s Icons

Bricks comes with 2 elements for building accordions: Accordion and Accordion (Nestable).

It is possible to set the old Accordion element’s regular and expanded-state icons via a theme style that applies to the entire website (make sure to remove the icons from the element itself since they override theme style).

Unfortunately the same is not possible with the element that you are most likely to use – Accordion (Nestable).

Out of the box, the icons appear like this in both normal and expanded states:

Bricks team could have at least added a line of CSS to rotate the icons in the opened state.

Nevertheless, we can add this custom CSS to turn the arrow to a down arrow in the default state and up arrow in expanded state:

.accordion-title-wrapper .brxe-icon {
    transform: rotate(90deg);
    transition: 200ms transform ease-in-out;
}

.brx-open .accordion-title-wrapper .brxe-icon {
    transform: rotate(-90deg);
}

If you want more controls and flexibility like being able to set different icons for normal and expanded states, consider the Pro Accordion element in our BricksExtras plugin instead.

Reference

https://forum.bricksbuilder.io/t/wip-accordion-nestable-icon-on-expanded/5035/4?u=sridhar