Accordion menu on footer - DAWN theme

[Official-Kortez]

Hello everyone,

I am currently redesigning my e-shop, and I would like some help with my final task. I am trying to create an accordion menu for the footer, but no matter how hard I try, I can't get it to work. I've followed multiple tutorials, and as a last resort, I even considered purchasing one I found online.

Since I understand coding and feel comfortable modifying code, I’d like to create this on my own. I’m looking to create something similar to the image attached, but I want it to appear only on mobile devices.

My store's URL is: https://official-kortez.com/

I would greatly appreciate any help! Thank you all in advance for your time and effort.

[CodingFifty]

Hi @Official-Kortez,

Please share the reference site URL.

[Official-Kortez]

Hello @CodingFifty ,

I found this picture on Google so i dont really have a reference site unfortunately.

[CodingFifty · Accepted solution]

@Official-Kortez 

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>

[Official-Kortez]

You are a legend!! Thank you very much this worked like a charm.

[CodingFifty]

You're welcome! @Official-Kortez 😊