Want to keep the footer section of my website in accordion style in mobile mode ( Boost Theme )

[dreamtechzone_5]

Hello Everyone!

I want to keep the footer section of my website in accordion style in mobile mode. Please help me. Thank you.

Store: https://urbanglowingstore.myshopify.com/

Password: Admin

I want to keep it like the image below.

[saim007]

@dreamtechzone_5 You have to create different footer menu for the mobile or you can do the accordion menu in existing footer menu file - footer.liquid template but for this you have to place the footer menu in accordion code, it is development task sorry I can't explain you here how to do if anything goes wrong it will break your footer section.

[dreamtechzone_5]

I added this code below in the footer.liquid file in Dawn theme. It worked. But in this theme this code is not working. Please help me. Thank you sir.

<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>