Switch the icons on the accordion-heading

John
asked 9 years ago

Hi there,
In the DW Focus theme I’d like to make a design switch to the accordion-heading element.
Currently if an item is open it shows a PLUS sign at the right side of the heading when it’s open/expanded. If it’s closed/collapsed there’s a MINUS sign.
I’d like to switch them. It seems like it’s a Glyphicon thing, and I’ve been digging around using a variety of tools (especially Chrome’s Inspect Element tool) but I can’t find the reference.
I suppose it would be similar to if I wanted to switch the plus/minus to an upward- or downward-facing chevron.
Thanks, John

1 Answers

Wilfred
answered 9 years ago

Hi John,
To change plus/minus to upward- or downward-facing chevron in accordion heading, please go Dashboard / Appearance / Customize / General Setting , and add the following code to Custom wp_head section:

 <style>
.accordion .accordion-heading a:before, .accordion .accordion-heading a:after {
 background: none !important;
}
.accordion .accordion-heading a:before {
 font-family: FontAwesome;
 content: "\\F078";
 font-size: 13px;
 margin-top: -10px;
}
.accordion .accordion-heading a.active:before {
 content: "\\F077";
}
</style>

Hope this helps.

John
replied 9 years ago

You’ve ALMOST got me all the way there. Thanks for the help so far.

The excellent solution you’ve provided is for chevrons. My hope was for a solution that used the plus and minus, just switched around.

I found them in the FontAwesome stack and switched out the *content* attributes to be \\F067 and \\F068 respectively.

That worked, except for one thing: the plus and minus signs are missing a few pixels on the top outside edges of the crossbar. The effect is that those corners look rounded off, almost as though there’s a mask of the chevron over it.

Any ideas? Thanks in advance.

Dominic Staff
replied 9 years ago

Please send me your site for further checking.

John
replied 9 years ago

I changed the font-size to 11px and that fixed it. Thanks! Great template!