How can I add accordions to my mobile website footer?

[Zatura]

Hello Experts,

This is my website zatura.in

I would like to display the footer as Accordions for the mobile versions and the regular one for the desktop version. Please help me achieve this. Can any app solve the problem? If so please share the app details.

I want something similar to this store >> https://nobero.com/

[gr_trading]

Hi @Zatura,

For this you have to edit the footer code, please refer to the below video to implement the same.

Hope this will helps...

[BSS-Commerce · Accepted solution]

I try to make accordions tob mobile footer but Theme Custoze doesn't support. Therefor, you have to make it by adding code to your theme.

Step 1: Go to Themes => Edit Code

Step 2: Find footer.liquid file

Step 3: Add the flowing code at the end of file:

<style>
    @media (max-width: 749px) {
    .footer__content-top .footer-block .footer-block__heading {
        position: relative;
        margin: 0;
        padding: 1.5rem 0;
        cursor: pointer;
    }
    .footer__content-top .footer-block .footer-block__heading::after {
        content: url("data&colon;image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M11 1.5L6 6.5L1 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        text-align: center;
      }
    .footer__content-top .footer-block .footer-block__heading:not(.block-collapsed)::after {
        content: url("data&colon;image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M11 1.5L6 6.5L1 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
        transform: translateY(-50%) rotate(180deg);
    }
    .footer__content-top .footer-block .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;
    }
    .footer__content-top .footer-block .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('.footer__content-top .footer-block .footer-block__heading').forEach((heading, index) => {
        heading.classList.add('block-collapsed_new')
        heading.classList.add('block-collapsed')
        heading.setAttribute('role', 'button')
        heading.setAttribute('aria-expanded', 'false')
        heading.setAttribute('tabindex', '1')
    
        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>

This is the result:

Hope it helps @Zatura