How to Turn Footer List into Accessible Accordion on Mobile

Hey everyone,

I’m looking into creating a footer as described in the Carbon Design System from IBM. A regular list of links with several list items on larger screens should turn into an accordion on Mobile.

You can see a working example here. Resize the sidebar to see the changes for the different screen sizes.

The accordion should definitely be accessible. I would use this component from Webflow.

One solution would be creating two different footers. One for the larger screen sizes and one for Mobile. The maintenance of two footers is not ideal though.

Any ideas on how to create one instance automatically turning into the accordion while still maintaining accessibility? I guess in this case it would be backwards, as the accordion already exists. I’m not quite sure, whether changing the layout and the interactions while leaving the custom attributes and the script untouched would be the right way to go or even considered best practice.

I appreciate any help. Thanks in advance! :v:t2:

Julian