Accordion Arrow - Active State

Hi, I have used the JS accordion on this staging site.

It’s working in every other instance, for example this page:

But on the test prep pages, the arrow active state isn’t being applied:

I deleted the classes and reset them, and I’ve tried to replicate the other pages, but I can’t figure out why it’s not working. Any advice would be appreciated - thank you!

Hi @Support-Luis , are you able to help with this item? Thanks in advance :pray:

Hey @ashley! The links are not valid could you share them again?

Here you go @Support-Luis , thanks!

hey @ashley! seems that we are missing the fs-accordion-active = is-active-accordion attribute on the page. Could you add it and test it again?

By the way, you seem to have the accordion script repeated. I believe the JS version will automatically add the script when needed so you can remove it from your setup.

Hi @Support-Luis - for the item .test-accordion_arrow-wrapper I’ve added a combo class .is-active-accordion that rotates the icon. I’ve also added the attribute fs-accordion-active = is-active-accordion to this item. Have I done this correctly? It still doesn’t seem to be working.

I’ve also removed the repeat JS script - thanks for your advice

@Support-Luis If I add this code before the head
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-accordion@1/accordion.js"></script>

Does that mean I delete the embed that is part of the library?

<!-- [Finsweet Attributes] Accordion -->
<script>(()=>{var t="https://cdn.jsdelivr.net/npm/@finsweet/attributes-accordion@1/accordion.js",e=document.querySelector(`script[src="${t}"]`);e||(e=document.createElement("script"),e.async=!0,e.src=t,document.head.append(e));})();</script>

@ashley, yes, you can either add the script yourself or leave the embed to handle this.

I’ll wait for you to let me know what you do and I’ll jump in and check the active issue :muscle:

Thanks @Support-Luis!

I have added the combo class .is-active-accordion to .test-accordion_arrow-wrapper and also added the attribute fs-accordion-active = is-active-accordion to this item. Have I done this correctly? It still doesn’t seem to be working.

@ashley yes, the setup is correct, however, the class seems to not be added as expected. can you share a read-only link, please?

@Support-Luis can I send the read only link to you directly, instead of posting it in the forum?

The combo class is added in the Style Guide (which is set to draft).

The arrows are a component as they are used multiple times throughout the site.

Hopefully one of these settings hasn’t caused the functionality to break…!

@ashley yes! You can DM me the read-only link I’ll check the setup there and let you know if that is causing the issues! :muscle:

Thanks @Support-Luis , I’ve shared the project read-only link with you. I appreciate your help with this :pray:

Hey @ashley! I think I found the issue! The fs-accordion-element = "arrow" attribute is repeated on all accordions.

Removing the attribute from the icon on the left seems to have worked for me as you can see in this quick video: Loom | Free Screen & Video Recording Software | Loom

Can you test and let me know how it goes?

1 Like

@Support-Luis Oops :see_no_evil: yes that was my mistake! This is now working, thank you so much!

1 Like