Solved

Dawn Footer - Collapsible Accordions for Navigation Menu Links

MMO1
Excursionist
32 0 4

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

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3465 459 515

This is an 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:

view - 2023-12-08T093414.042.png

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

view - 2023-12-08T093449.977.png

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

view - 2023-12-08T093527.925.png

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>

view - 2023-12-08T093623.599.png

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

view - 2023-12-08T093716.409.png

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

Hope it helps @MMO1 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 3 (3)

BSS-Commerce
Shopify Expert
3465 459 515

This is an 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:

view - 2023-12-08T093414.042.png

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

view - 2023-12-08T093449.977.png

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

view - 2023-12-08T093527.925.png

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>

view - 2023-12-08T093623.599.png

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

view - 2023-12-08T093716.409.png

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

Hope it helps @MMO1 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

MMO1
Excursionist
32 0 4

@BSS-Commerce Thank you!

akiajewelry
Tourist
6 0 1

@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