Dawn Theme - Accordion | Collapsible Footer

[famubarik]

Hello everyone,

I have recently switched to Shopify from woo commerce. I am looking for a (Free) way if possible to get an accordion-style footer for my dawn theme. 

Thank you

[ReverseAdsLLC]

Sounds like a JS conflict. Take a look if you are using different versions of jQuery that might interfere with each other.

[SpeedyDev · Accepted solution]

@famubarik 

No, their is no free way to get it, but i have created a solution for this.

Add this code in the bottom of footer.liquid 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', () => {
  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) => {
    heading.classList.add('block-collapsed')
    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>

[famubarik]

awesome work mate. thank you so much. it worked perfectly as I wanted. 

[adventmedia]

Thanks for this code. When I first applied it to my theme nothing happened. I think there is some lag with Shopify server. I tested in 3 different browsers and none of them loaded the footer as an accordion. About 20 minutes later it was working properly though.

[myKidsLounge]

Hi there, 

Thank you for the code, I have pasted it at the bottom ot the footer.liquid file, however it just shows the minus (-) sign thats all. Do I have to do anything else? (see screenshot) 

[myKidsLounge]

Hi @SpeedyDev 

Thank you, that works perfect. However, is it possible that the tabs are not collapsed as default? Currently all tabs are open by default and I would like them closed as default. 

Best regards, 

Daniel 

[adventmedia]

They are usually collapsed by default. 

[LinnN]

Hi @SpeedyDev, this is gold! Thanks so much for sharing. How can we get the tabs to be closed by default?

[vinceservidad]

Hi.

Change this code .grid .footer-block__heading:not(.block-collapsed)::after {
content: "-";

To this (instead of after, change it to after.

.grid .footer-block__heading:not(.block-collapsed)::before {
content: "-";

If you need more help, check out madjaas.com

[RobArt98]

Hi Papavince,

i just copied your code and its working fine in the Normal Mobile mood

If i switch and rotate the phone it looks like this

May you can help out with a solution

thanks in advance

[Rescue_Roasting]

Thank you for this code! Is there a way to have the buttons/headings centered?

[benzi2512]

cooooool! thank you so much 

[danilo0327]

Thanks a lot...it works pretty well 

[kamm0]

Hello @SpeedyDev , Is it possible to put Brand Information in collapsible as well??