How can I design a footer accordion with the Dawn theme?

How can I design a footer accordion with the Dawn theme?

JJELLIE
Shopify Partner
5 0 0

Hi. I am currently building a new store for myself and I am having difficulties to make the footer menu to be accordion. 

 

Would anyone able to help me? Perhaps if anyone already has the code, would you guys please share to me? If so, that will be super great. 

 

Thanks all

Replies 12 (12)

DipenPanchal
Shopify Partner
252 59 81

Hello @JJELLIE 

Greetings!!

 

make the footer menu  from here https://nimb.ws/NxhWz6

and set like this https://prnt.sc/viEbdZakFUBR

 

Let me know your thoughts 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
JJELLIE
Shopify Partner
5 0 0

Hi but it is not accordion style. What I want is accordion style in mobile view. 
Do you know how todo it?

 

EcomGraduates1
Shopify Partner
80 3 7

This code is super  helpful  and works  well  

https://ecomgraduates.com/products/dawn-theme-accordion-footer

 

We design and develop stunning websites to make your customers fall in love with your business.
5 star reviews https://ecomgraduates.com/
JJELLIE
Shopify Partner
5 0 0

I saw it but it is required to buy.

Mike1974
Excursionist
22 0 2

this  only works  on mobile  however

Mr_RaviRaj
Shopify Partner
505 57 108

@JJELLIE 

@EcomGraduates1 

Add this code in the bottom of footer.liquid file,

if you are not able to add it let me inform i will add it to your theme.


Note: this solution is only for Dawn theme, if you want the solution for your custom or other theme let me inform,

we will build for you.

<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_new')
    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>
banned
famubarik
Excursionist
28 0 18

Hi there, 

thank you for the code, it is working fine.  but the problem is all accordions are opened by default, which will make no difference to the buyer. 
can you please provide code in which accordions are closed by default?  thank you

Julian_F
Visitor
2 0 1

yeah, same for me. let me know if u got this solved, thanks!

 

@Mr_RaviRaj 

vishalgudla
Shopify Partner
14 1 6

Found the solution for this. Change the following
1. block-collapsed_new -> block-collapsed
2. heading.setAttribute('tabindex', '1') ->heading.setAttribute('tabindex', '0')

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

 Everything should work fine after that. 

tuckerkaide
Excursionist
13 0 6

YOU ARE A GOD!!! HOURS INTO DAYS. DAYS INTO WEEKS. WEEKS INTO MONTHS & FINALLY!

 

I cannot thank you enough!!!

Rescue_Roasting
Visitor
2 0 0

Hi there! How would you do this for Dawn 3.0.0? The above code doesn't seem to be working.

topnewyork
Navigator
307 35 47

Hi, You can do this very easily by following this video.

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel