Help with Accordion Video and template download SOLUTION

Am I going picture blind as been working on my website for a couple of haours and now looking at adding FAQ’s so looked at template and video, like the “business” one but is it me or are Chevrons (arrows) pointing the wrong way? TIA

They certainly are!

Thanks I thought I was going mad but at my age thats most probably normal! :slight_smile:

There are other issues that have surfaced with the accordion in the last two updates.

You can no longer set corner radius and have them show up. They do show up on the bottom of the expanded component but not when they are collapsed. This used to work just fine.

Looks like a bug crept in.

So Ive now put the down in the SVG box and it remained wrong way, put up one in and it puts down in download. @dan is this coded in somewhere for an idiot like me? TIA

You might want to check that the rotation values for the two settings are correct in the Icon section of the accordion settings.

In mine the OPEN is set to 180º and the Closed to 0º as shown here. With these settings things are working correctly for me.

Thanks so I tried 90/180/240/360 and nothing happened on project file (original). On my project I added the chevrons, correct way up and then wrong way up, the image below shows what I have put and what I get.

I then change to dark mode and I can not get the icon to show even though I have made it white as in second pic below.

So from my ignorant point of view I think this coded wrong and as a drop and drag expert I wouldn’t know what to do to correct it. Also the colour doesn’t seem to change nor the rotation when entering different values. I am using FA6 icons to correct the orientation - this seems to work but in opposite direction of Chevron.

Very strange.

I use the DOWN chevron with the OPEN set to 180º and the CLOSED set to 0º and it does the right thing. I have never used the chevron that is default in the component.

I can switch the colors on the SVG without problems, although you have to make sure you are doing it for the appropriate state of the component. So when you are viewing in the editor you are only seeing one of the states. Strangely because you are looking at the accordions open in the editor, that does not appear to be the state for the icon. If you set the OPEN color you will not see it change, but if you switch to CLOSED the color change will show in the editor. This seems wrong, but who knows.

It appears the accordion is in the CLOSED state when viewed in the editor, even though the content is visible. So the icon reflects this state. A little confusing.

Robin THANKS I will start again tomorrow from scratch. All my FA6 icons change colour but this one seems not to. I did try with all the degree settings as I said above and nothing worked. I’ll report back. Have a pleasant evening.

@PMUK Just bear in mind when you are trying out the settings in the Editor that you will not see some of them because it does not reflect both states. You will only truly see them when previewed in the browser.

Ok had a play and cracked it. OPEN 180 degrees, CLOSED 0, I added FA Chevron to try and rectify which it did directionally but couldn’t get colour to change on dark mode so it was visible. Deleted added SVG and changed directions around and changed Colour to White and bing - all works and is pointing arrows in correct direction. so THANKS for all your help much appreciated.

1 Like