Add arrow to the accordian

https://pasteboard.co/33BwXJtFG.png

figured it out.

I used:

.accordion-title:after {
content: ‘\25BE’;
float: right;
font-size:25px;
}

Did you need to change anything else? I’m looking to do the same thing but it appears the CSS you have here does nothing for me.

Nevermind, got it!

• This reply was modified 7 years, 10 months ago by MissBizzy.

@missbizzy / @bananaman:

Can you share what else was done to add an arrow to a dropdown menu?

@rylink I honestly think it just wasn’t working because of the \ in 25BE.

To others looking for a solution, here is the full functional CSS, and adds in the ability for the down arrow to rotate:

/* Accordion Styles */
.accordion {
margin-bottom: 0px;
}
.accordion-title {
background-color:#f4f4f4;
margin-top: 0px;
padding: 10px 0px 10px 10px;
cursor: pointer;
}
.accordion-title:after {
content: “\25BE”;
float: right;
transition: 0.2s;
}
.accordion-title.open:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.accordion-content {
padding-left:10px;
padding-bottom:20px;
}
.accordion-title:hover {}
.accordion-title:first-child {border: none;}
.accordion-title.open {cursor: default;}

Hi there,

I tried implementing the above CSS, but am still having no luck. Has anyone else experienced this? I’d really like to add some sort of visual cue, whether it’s an arrow, plus sign, etc., to my accordions.

Hi,
This CSS is not working for me either. I have tried everything I can think of. My accordion is here: https://rmofstclements.com/east-beaches-heritage-wing/
I need a visual indicator letting people know there is more content here. There is no point if users don’t know content is there. I’m wondering if there is conflict with other scripts?
Thanks!

I would suggest backing up your CSS styles and copying the entire css style I posted previously to see if it fixes the issue, or replace the

content: “\25BE”;

with something as simple as:

content: "+";

to see if that gets a character to display for you at all.

(This should make a ‘x’ and ‘+’ appear when expanding/contracting your accordion if implemented correctly as opposed to the pyramid shape.)

• This reply was modified 7 years, 7 months ago by rylink.
• This reply was modified 7 years, 7 months ago by rylink.

Hi rylink,
Thanks for replying. Actually, I was using the style sheet you posted initially. I tried what you suggested above and it didn’t work. I think I will have to look for a different plugin as I can’t leave it with no visual indicators.

It works for me with single code marks:
content: ‘\25BC’;

Hi,

I tried with single code marks and I’m still not getting any luck. I’ve tried just using content: '+'; and it’s still not working. I’m using a theme called 15Zine. Is anyone else having this issue and/or have any other solutions other than the aforementioned ones?

Here is a screenshot of my code in the CSS editor: https://imgur.com/a/Z5StK

• This reply was modified 7 years, 7 months ago by hannameow.

@hannameow : you should change the quotes around ‘\25BC’ with ‘ . Yours are the ‘curly’ type. The quote should be the straight one: ‘. (Happens sometimes when you copy paste)

Hey @wpmh,

Thanks for the insight. That worked! Appreciate it.

I ended up getting this to work with two changes:

– for the arrow, instead of using escaped unicode, I used UTF8 – in plain language, I copied and pasted the arrow I wanted from here ??

– I added the evil/dreaded !important to the content line

.accordion-title:after {
content: "?" !important;
float: right;
transition: 0.2s;
}

You can see my results here:

https://nrocnetwork.org/support-options/office-hours/