Accordion Icon changes based on open or close state

[omartan]

Hi,

I’m trying to figure out if there’s an easy way to change or transition the icon from

a + to a - when it’s open?

Right now, Pro seems to only allow us to rotate the icon but nothing more.

[prakash_s]

Hello @omartan,

Thanks for writing to us.

By default, the accordion rotates the icon when active. To change the icon completely for the active state (plus → minus), add this CSS to the Element CSS

Add this CSS code to the Element CSS to chnage icon in the minus from the plus icon.

$el .x-acc-item .x-acc-header.x-active span.x-acc-header-indicator i.x-icon:before {
    content: '\f068';
    font-family: "FontAwesome" !important;
    transform: translate3d(0, 0, 0) rotate(90deg);
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding, you can subscribe to One, where customization questions are answered.

Hope it helps.
Thanks