How to make the footer menu collapsible on MOBILE

[CreatorTim]

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

[CodingFifty]

Hello,

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

<style>
@media (max-width: 749px) {
.grid .footer-block.grid__item {
margin: 0;
}
.grid .footer-block__heading {
position: relative;
margin: 0;
padding: 1.5rem 0;
cursor: pointer;
}
.grid .footer-block__heading::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
text-align: center;
}
.grid .footer-block__heading:not(.block-collapsed)::after {
content: "-";
}
.grid .footer-block__heading.block-collapsed + .footer-block__details-content {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
transition: all .2s ease-out;
overflow: hidden;
}
.grid .footer-block__heading + .footer-block__details-content {
visibility: visible;
opacity: 1;
height: auto;
transition: all .2s ease-out;
overflow: hidden;
margin-bottom: 3rem;
}

}
</style>

<script>
window.addEventListener('DOMContentLoaded', () => {
if (window.matchMedia('(min-width: 750px)').matches) {
return
}

const handleCollapse = (heading) => {
if (heading.classList.contains('block-collapsed')) {
heading.classList.remove('block-collapsed')
heading.setAttribute('aria-expanded', 'true')
} else {
heading.classList.add('block-collapsed')
heading.setAttribute('aria-expanded', 'false')
}
}

document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
heading.classList.add('block-collapsed')
heading.setAttribute('role', 'button')
heading.setAttribute('aria-expanded', 'false')
heading.setAttribute('tabindex', '0')

heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
heading.setAttribute('aria-controls', `footer-block-index-${index}`)

heading.addEventListener('click', () => { handleCollapse(heading) })
heading.addEventListener('keypress', () => { handleCollapse(heading) })
})

})
</script>

Thanks!

[CreatorTim]

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

[CreatorTim]

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