Dawn Footer - Collapsible Accordions for Navigation Menu Links

[MMO1]

Hi. I am trying to make all of my footer navigation menus to be made into accordions instead of listing out all the links. All of the previously provided codes are no longer working on the new Dawn theme. Can someone please help? This is my store.

9eb30b.myshopify.com

Password: hello

[BSS-Commerce · Accepted solution]

Hello @MMO1, I've read your issue, and I have a solution to help you resolve it. Here is the default footer content of the Draw theme, and you can transform it like this. Follow my instructions below:

Step 1: Go to the online store and select "Edit code"

Step 2: Enter the search bar and open the files: theme.liquid and base.css

Step 3: Scroll down to the bottom of the "theme.liquid" file above the </body> tag and add the following code:

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const ele = document.querySelector('.footer__blocks-wrapper');
            const ele2List = ele.querySelectorAll('.footer-block__heading');
    
            if (ele2List.length > 0) {
                ele2List.forEach(function(ele2) {
                    ele2.addEventListener('click', function() {
                        const parentBlock = ele2.closest(".footer-block--menu");
                        if (parentBlock) {
                            parentBlock.classList.toggle("open");
                        }
                    });
                });
            }
        });
    </script>

Step 4: Scroll to the bottom of the base.css file and add the following code:

.footer-block--menu h2 { 
  cursor: pointer; 
  }
.footer-block--menu ul { 
  max-height: 0; 
  overflow:hidden; 
  transition: max-height 1s ease-out; 
  }

.footer-block--menu h2:after { 
    content: url('https://api.iconify.design/ei/plus.svg?width=20&height=20');
    width: 25px;
    float: right; 
  }
.footer-block--menu.open h2:after { 
   content: url('https://api.iconify.design/ei/minus.svg?width=20&height=20');
   width: 25px;
  }

.footer-block--menu.open ul { 
  height:auto; 
  max-height: 500px; 
  transition: max-height 1s ease-in !important; }
}

Step 5: Save the changes and check the new layout in your footer.

Hope it helps @MMO1 

[MMO1]

@BSS-Commerce Thank you!

[akia1]

@BSS-Commerce could you help me achieve the same thing on my site? I have a slightly customized Dawn theme and the code you previously provided is not working. Also, I would only like to have the collapsible menus on mobile view only.

https://bipu6ijlgow3s2dr-51058507931.shopifypreview.com