Changing mobile menu into an accordion menu

Store Design
1 

      

        
        {{ link_markup }}
      

      
        {% for link in link.links %}
          {% comment %} 
            Handle case where multiple child menus 
            have an item called 'sale' in position 1 
          {% endcomment %}
          {% assign index_recursive = index | append: 'x' | append: forloop.index %}
          {% render 'nav-item-mobile', link: link, index: index_recursive, link_level: link_level_next %}
        {% endfor %}
      

      {%- if section -%}
        
          {% for block in section.blocks %}
            {% comment %} Render block content {% endcomment %}
            {%- if block.settings.position == index -%}
              {% render 'header-block', block: block %}
            {%- endif -%}
          {% endfor %} 
        

      {%- endif -%}

    

  {%- else -%}

How would I change this menu into an accordion menu?

(Currently, when a menu item is clicked, it switches to another page to show the submenus. I want to make it so that the submenus show below, not on a separate page)

Thank you

2

@k-crush
Hii,
Can You Please Share Your Store URL and Store Details..