How to make the footer menu collapsible on MOBILE

Hi, how can I make my footer menus “STORE” and “LEGAL” work as collapsible content?¨

I want their content to be hidden by default, and I’d like an arrow to appear to the right of the headings “STORE” and “LEGAL.” When I click omn that arrow, the menu content should be shown.

Here’s my store URL: https://1049xn-ya.myshopify.com/

And here’s a store where it works the way I want: https://tomnoske.store/

I ONLY WANT THIS TO APPLY ON MOBILE!

Thanks a lot for your help,
Tim

Hello,

Please try this code in the footer.liquid. Please paste it at the bottom of the file.


Thanks!

Thanks a lot, it works! But would it be possible to add a smooth animation for the links to slide out?

Under “STORE”, there’s already some animation, but under “LEGAL”, there isn’t any. Maybe it’s enough to apply the same animation from “STORE” to “LEGAL”.

Thanks a lot, I really appreciate your help.
Tim

Could you please help me with this again? With adding the animation?

Would it be possible to add a smooth animation for the links to slide out?
Under “STORE”, there’s already some animation, but under “LEGAL”, there isn’t any. Maybe it’s enough to apply the same animation from “STORE” to “LEGAL”.

Thanks a lot, I really appreciate your help.
Tim