[cowgillconsultingParticipant]

By default, an accordion toggle heading in X Theme has a “plus” symbol which rotates 45 degrees to become an “X” when the heading is toggled open to reveal the accordion items below.

I have changed the “plus” symbol to a right-pointing arrow through custom CSS as follows:

.x-accordion-heading .x-accordion-toggle:before
{
color: #dd0000 !important;
font-size: 12px !important;
font-family: FontAwesome;
content: “\f04b”;
display: inline-block !important;
vertical-align: middle !important;
}

Now the only remaining problem is the matter of rotation. My right-pointing arrow rotates only 45 degrees, like the default symbol. I want it to rotate 90 degrees, so that it’s pointing down at the revealed content of the accordion panel.

I have tried to do this by adding custom CSS for each of two classes —

.x-accordion-toggle:before

— and —

.x-accordion-toggle .collapsed:before

— but I haven’t been able to make it work.

SO … can you provide me with custom CSS or custom script which will alter the rotation of the accordion toggle icon (symbol) from a 45 degree rotation to a 90 degree rotation? Thanks very much!

[ChristopherModerator]

Hi there,

Please try this code :

.x-accordion-heading .x-accordion-toggle:before {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Hope it helps.

[cowgillconsultingParticipant]

That did it! Thanks!

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts