Problema con menu acordeon jquery que no oculta submenúes al cargar página

[nelson_nnn]

Buenas comunidad, tengo una consulta, estoy implementando un menú lateral tipo acordeón con submenúes a los que alimento desde una base de datos usando twig, los menúes funcionan bien el problema es que al cargar o recargar la página esos segundos de carga me despliega todos los submenúes con los menus juntos y no queda muy agradable que cargue se vean desplegados y cuando termina de cargar se ocultan cuando el objetivo es que no se vean desde iniciada la carga de la pagina :P, alguna sugerencia para arreglar ese problema???

Código Javascript:

function menuLateral(){
    $("ul.subcategorías").hide();                        
    $("a.cagegorías").toggle(
      function() { 
        $(this).parent().find("ul.subcategorias").slideDown('fast'); 
        $(this).css("font-weight", "bold");
      },
      function() { 
        $(this).parent().find("ul.subcategorias").slideUp('fast'); 
        $(this).css("font-weight", "normal");
      }                        
    );     
}
 

Código HTML:

<ul class="menudesplegable">
      {% for categoria in categorias %}     
                
    <li class="menu-item"><a href="#" class="categorias" >{{categoria.categoria}}</a>
                  <ul class="subcategorias" >
 
                  {% for subcategoria in subcategorias %}
                    {%if categoria.idcategoria == subcategoria.categoria.idcategoria %} 
 
                         <li class="submenu-item" ><a href="#">{{subcategoria.subcategoria}}</a></li>
 
                    {%endif%}  
                  {% endfor %}
                   
          </ul> 
         </li>    
      {% endfor %}
</ul>