My footer accordion for mobile isn't working (Debut)

Store Design
1

Hello, I made a mobile footer accordion using this guide. On the site the accordion isn’t toggled but forcing the code through Devtools it works fine. I think it’s where I placed the jQuery?

Shop link https://02555x9o3nc61mdb-56874959012.shopifypreview.com

All the code is on my footer.liquid.

Here’s the relevant footer section


   

      {%- for block in section.blocks -%}
      

      

         {%- if block.settings.title -%}
         

{{ block.settings.title | escape }}

         {%- endif -%}
         {%- case block.type -%}
         {%- when 'text' -%}
         {%- if block.settings.text != blank -%}
         
            {{ block.settings.text }}
            
            {{block.settings.button_label}}
            
         

         {%- endif -%}
         {%- when 'link_list' -%}
         {%- assign footer_linklist = block.settings.menu -%}
         
            {%- for link in linklists[footer_linklist].links -%}
            - {{ link.title | escape }}
               
            
            {%- endfor -%}
         

         {%- when 'socials' -%}
         
         {%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}
         {%- if social_icons -%}
         

            {%- for social in socials -%}
            {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
            {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
            {%- if settings[social_link] != blank -%}
            - {%- include icon_link -%}
                   {{social}}
            
            {%- endif -%}
            {%- endfor -%}
            {%- endif -%}
         
         {%- endcase -%}
      

   

   {%- endfor -%}

And the CSS with the jQuery


.nav-footer-item ul {
list-style: none;
padding-left: 3px;
}
.open p {
opacity: 0.3;
}
.nav-footer-item {
padding: 25px !important;
}
@media (max-width : 768px) {
.nav-footer .nav p { 
cursor: pointer; 
}
.nav-footer ul { 
max-height: 0; 
overflow:hidden; 
transition: max-height 1s ease-out; }
.nav-footer .nav p:after { 
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 20 20'%3E%3Cpath d='M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10'%3E%3C/path%3E%3C/svg%3E");
width: 25px;
float: right; 
}
.nav-footer .nav.open p:after { 
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='svg-icon' viewBox='0 0 20 20'%3E%3Cpath d='M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z'%3E%3C/path%3E%3C/svg%3E");
width: 25px;
}
.nav-footer .nav.open ul { 
height:auto; 
max-height: 500px; 
transition: max-height 1s ease-in !important; }
}