Footer menu needs to be drop down for mobile its not working

[SM_Home]

the theme of my store is dawn 

i have a lot in footer but want it to be a drop down but its not working

Please if someone can help

[CodingFifty · Accepted solution]

Hi @SM_Home,

Go to Online Store, then Theme, and select Edit Code.
Search for footer.liquid file Add the provided code at the end 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', () => {
  const headings = document.querySelectorAll('.grid .footer-block__heading');

  const handleCollapse = (heading) => {
    const content = heading.nextElementSibling;

    if (heading.classList.contains('block-collapsed')) {
      heading.classList.remove('block-collapsed');
      heading.setAttribute('aria-expanded', 'true');
      content.style.display = 'block'; // or any other preferred display property
    } else {
      heading.classList.add('block-collapsed');
      heading.setAttribute('aria-expanded', 'false');
      content.style.display = 'none';
    }
  };

  headings.forEach((heading, index) => {
    heading.classList.add('block-collapsed');
    heading.setAttribute('role', 'button');
    heading.setAttribute('aria-expanded', 'false');
    heading.setAttribute('tabindex', '0');

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

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

    heading.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' || event.key === ' ') {
        handleCollapse(heading);
      }
    });
  });
});
</script>