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

Store Design
, , , , , , ,
1

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.

dreamtechzone_5_0-1741610832988.png
dreamtechzone_5_0-1741610832988.png502×345 8.88 KB

2

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

1 Like
3

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.

@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; } }
4

@dreamtechzone_5
Use bellow js and css it will solve your issue

.accordion-heading {
        cursor: pointer;
   
        padding: 10px;
        margin: 0;
    }

    .accordion-content {
        display: none;
        padding: 10px;

    }

    .accordion-content.active {
        display: block;
    }

// Select all accordion headings
    const headings = document.querySelectorAll('.accordion-heading');

    // Add click event listener to each heading
    headings.forEach(heading => {
        heading.addEventListener('click', function() {
            const content = this.nextElementSibling;

            // Toggle active class for the content
            content.classList.toggle('active');
        });
    });