How to hide the Brand Information block in the Mobile Footer Accordion (Dawn 11.0.0)

[DRAWandCARE]

Hello, everyone!

I'm working with the Dawn 11.0.0 theme on my website, and recently used the code below for the accordion menu in the mobile version of my footer. It worked well for me, but now I'm wondering if there is any way to hide the Brand Information block in the accordion as well (there is a plus sign on it, it changes to a minus sign when clicked, but the text remains open all the time).

Website link: https://www.drawandcare.com 

Would be grateful for any help!

Code from my footer.liquid:

<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> 

[Dan-From-Ryviu · Accepted solution]

Hi @DRAWandCARE 

You can try to update your code like this and chec

<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-index-3,
  .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> 

k if its working 

[DRAWandCARE]

Yes, thank you so much for your help! It worked perfectly! 

[Dan-From-Ryviu]

You are welcome!

[DRAWandCARE]

Hello again!

I have an additional question: Can the Brand Information block be set to open by default but allow closing by clicking on the '-' mark?

Will be very grateful for your help! 🙏

[Dan-From-Ryviu]

Hi @DRAWandCARE 

Brand Information? Could you show me?

[DRAWandCARE]

Thanks so much for your reply!

Sure! This one from my mobile footer accordion ('Let's Connect' line, https://www.drawandcare.com/)  

 

I need only this block to be open by default but allow it to be closed by clicking the '-' sign. Thank you!

[DRAWandCARE]

Currently, I have this code for the accordion in my footer.liquid:

<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-index-3,
  .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> 

[DRAWandCARE]

Or simply open it and remove the "+/-" mark from this block if it's more realistic to implement 😅

[Dan-From-Ryviu]

Hi @DRAWandCARE 

You can try to update the script code above to this and check again 

<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');
    }
  };

  const letsConnectHeading = document.querySelector('.grid .footer-block__heading[aria-controls="footer-block-index-3"]');
  
  // Open lets connect 
  letsConnectHeading.classList.remove('block-collapsed');
  letsConnectHeading.setAttribute('aria-expanded', 'true');


  const letsConnectDetailsContent = letsConnectHeading.nextElementSibling;
  letsConnectDetailsContent.style.visibility = 'visible';
  letsConnectDetailsContent.style.opacity = '1';
  letsConnectDetailsContent.style.height = 'auto';

  document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
    if (heading !== letsConnectHeading) {
      heading.classList.add('block-collapsed');
      heading.setAttribute('role', 'button');
      heading.setAttribute('aria-expanded', 'false');
      heading.setAttribute('tabindex', '0');

      const detailsContent = heading.nextElementSibling;
      detailsContent.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>

[DRAWandCARE]

I replaced the previous script with a new one. However, as a result, all the accordion blocks are now open, and the '-' marks no longer function to close them 😞

[Dan-From-Ryviu]

Please try to update the script to this and check again. 

<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');
    }
  };

  const letsConnectHeading = document.querySelector('.grid .footer-block__heading');
  
  // Open lets connect 
  letsConnectHeading.classList.remove('block-collapsed');
  letsConnectHeading.setAttribute('aria-expanded', 'true');


  const letsConnectDetailsContent = letsConnectHeading.nextElementSibling;
  letsConnectDetailsContent.style.visibility = 'visible';
  letsConnectDetailsContent.style.opacity = '1';
  letsConnectDetailsContent.style.height = 'auto';

  document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
    if (heading !== letsConnectHeading) {
      heading.classList.add('block-collapsed');
      heading.setAttribute('role', 'button');
      heading.setAttribute('aria-expanded', 'false');
      heading.setAttribute('tabindex', '0');

      const detailsContent = heading.nextElementSibling;
      detailsContent.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>

[DRAWandCARE]

For some reason, the first block is now open, and I'm unable to close it.

[Dan-From-Ryviu]

Can I send request access to your store so I can check and help you directly?

[DRAWandCARE]

Of course! Please send the request! 🙂