Help - Collapsed footer menu on Crave theme

[MichaelNguyen]

Hello everyone, I'm new. I'm having problems with my footer. It's too long and I want it to be ccollapse on mobile devices. I am using the Crave theme. Here is an illustration of the current version and the version I want to reduce. please help me. Thanks a lot!

[Dan-From-Ryviu]

Hi @MichaelNguyen 

You can try to add this code to theme.liquid file before </body> tag 

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

[MichaelNguyen]

When I paste it, it looks like this. When I click the collapse button, the menu doesn't collapse. Did I do something wrong somewhere? Please guide me

[Dan-From-Ryviu]

Could you share the link to your product?