How can I make the footer menu collapsible on mobile devices?

Store Design
, , , ,
1

Hi guys,

Gabriel here, pretty new to the shopify world :slightly_smiling_face: I have a small problem that I couldn’t find a solution to it, maybe you guys can help sort it out.

I’m trying to make the footer menu’s collapsible, especially on mobile devices, so that my customers won’t have to scroll all the way down to find what they are looking for.

I’ve tried adding this piece of code inside the footer.liquid but the problem is that the menu appears already expanded instead of being collapsed. Where do you think is the mistake in code?

<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', () => {
  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', 'false')
    } else {
      heading.classList.add('block-collapsed')
      heading.setAttribute('aria-expanded', 'true')
    }
  }
  
  document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
    heading.classList.add('block-collapsed_new')
    heading.setAttribute('role', 'button')
    heading.setAttribute('aria-expanded', 'false')
    heading.setAttribute('tabindex', '0')

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

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

})
</script>

The link to my website is https://esentya.com/ and I’m using Refresh theme.

Thank you for your time!

2

hi @Gabriel90

If you are familiar with coding, then you should use “summary & details” tag to do collapsible content. For more details of how to use these tags, then refer this guide

https://www.w3schools.com/tags/tag_summary.asp

3

Hi @ExpertRookie ,

I’m not really familiar with coding, I just have a broad idea of some things. The above code was provided as a solution on a different topic but for another free theme, which unfortunately it does not work on my theme.

Do you have any suggestions on what I need to change?

Thank you!

4

Hi @Gabriel90
If you don’t know about the code, I think you should hire an expert, they will help you customize your theme code to support for the function you want.

5

Thanks @ExpertRookie . I thought that maybe it’s a simple mistake that I overlooked in the above code and can be easily fixed without additional support, cause I’m just starting out and my budget it’s kinda stretched :frowning: