How to make Collapsible Footer Menus on Mobile (Trade Theme)

[jordanbford1]

Hello everyone,

I would like to make my Footer Menus collapsible on Mobile view only! (see screenshots below)

I am using Trade Theme 15.2.0 for my website.

Help would be appreciated 🙂

Thank you!

How it's looking right now

How I want it to be collapsed:

[Guleria]

Hello @jordanbford1 ,

Your store is password protected, please share. 

btw as I know it needs customization and for that you need to go with a developer.

Regards
Guleria

[jordanbford1]

@Guleria I have removed the password! Sorry!

[AnneLuo]

Hi, @jordanbford1 

Can you share your password so that I can view your store?

[jordanbford1]

@AnneLuo I have removed the password sorry!

[AnneLuo]

I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

[Dan-From-Ryviu · Accepted solution]

Hi @jordanbford1 

You can add this code to theme.liquid file, before </body> in Online Store > Themes > Edit code and check if it works

<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.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) => {
          // Initially collapse all menus by default
          heading.classList.add('block-collapsed');
          heading.setAttribute('role', 'button');
          heading.setAttribute('aria-expanded', 'false');
          heading.setAttribute('tabindex', '1');
      
          // Set corresponding content block with an ID for aria-controls
          heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`);
          heading.setAttribute('aria-controls', `footer-block-index-${index}`);
      
          // Add click and keypress events to toggle collapse
          heading.addEventListener('click', () => { handleCollapse(heading); });
          heading.addEventListener('keypress', () => { handleCollapse(heading); });
        });
      
      });
    </script>

[topnewyork]

Hello, @jordanbford1 

.footer-section {
    background-color: #0c3c2c; 
    color: white;
    padding: 20px !important;
    font-family: Arial, sans-serif;
}

.footer-section h4 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.footer-section li {
    margin-bottom: 5px !important;
    text-decoration: none;
    list-style: none;
}

.footer-section a {
    color: white;
    text-decoration: none;
    list-style: none;
}

.footer-section a:hover {
    text-decoration: none;
}

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

 Thanks!