When clicking on the menu link, close the menu and change the hamburger symbol in the menu

Issue

I have the following code that builds my menu.

$(".btn-show").click(function(e) {
      e.preventDefault();
      el = $(this).data('element');
      $(el).show();
      $("section > div").not(el).hide();
    });

<link href="https://demo.dashboardpack.com/architectui-html-free/main.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://demo.dashboardpack.com/architectui-html-free/assets/scripts/main.js"></script>
    
    <div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
        <div class="app-header header-shadow">            
            <div class="app-header__mobile-menu">
                <div>
                    <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
                        <span class="hamburger-box">
                            <span class="hamburger-inner"></span>
                        </span>
                    </button>
                </div>
            </div>            
        </div>        

        <div class="app-main">
            <div class="app-sidebar sidebar-shadow">
                <div class="scrollbar-sidebar">
                    <div class="app-sidebar__inner">
                        <ul class="vertical-nav-menu">                        
                            <li class="app-sidebar__heading">SERVIÇOS</li>
                            <li>
                                <a href="#">
                                    <i class="metismenu-icon pe-7s-tools"></i>
                                    Requisições
                                </a>
                                <ul> 
                                    <li class="nav-item">
                                        <a href="s6" data-element="#minhaDiv6" class="nav-link btn-show atua-ped mobile-toggle-nav">
                                            <i class="metismenu-icon pe-7s-cart"></i>
                                            Luvas
                                            
                                        </a>
                                    </li>                    
                                </ul>
                            </li> 
                        </ul>
                    </div>
                </div>
            </div>

            <section id="s6">
                <div style="display:none;" id="minhaDiv6">
                    Teste
                </div>
            </section>


        </div>
    </div>

When I use the application on my cell phone, I want it to close the automatic menu and change the hamburger symbol when clicking on a menu link.

If you open the menu and close on hamburger, everything works fine. But when I open the menu and click on the link to open the section, the menu closes but the hamburger symbol remains the X for close, but I should also change it.

I use the following code in the link to close the menu when I click.

mobile-toggle-nav

Can you help resolve the problem?

Solution

Added one line to JS code

$(".btn-show").click(function(e) {
      e.preventDefault();
      el = $(this).data('element');
      $(el).show();
      $("section > div").not(el).hide();
      $("button.hamburger").removeClass("is-active"); // add this line
    });

<link href="https://demo.dashboardpack.com/architectui-html-free/main.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://demo.dashboardpack.com/architectui-html-free/assets/scripts/main.js"></script>
    
    <div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
        <div class="app-header header-shadow">            
            <div class="app-header__mobile-menu">
                <div>
                    <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
                        <span class="hamburger-box">
                            <span class="hamburger-inner"></span>
                        </span>
                    </button>
                </div>
            </div>            
        </div>        

        <div class="app-main">
            <div class="app-sidebar sidebar-shadow">
                <div class="scrollbar-sidebar">
                    <div class="app-sidebar__inner">
                        <ul class="vertical-nav-menu">                        
                            <li class="app-sidebar__heading">SERVIÇOS</li>
                            <li>
                                <a href="#">
                                    <i class="metismenu-icon pe-7s-tools"></i>
                                    Requisições
                                </a>
                                <ul> 
                                    <li class="nav-item">
                                        <a href="s6" data-element="#minhaDiv6" class="nav-link btn-show atua-ped mobile-toggle-nav">
                                            <i class="metismenu-icon pe-7s-cart"></i>
                                            Luvas
                                            
                                        </a>
                                    </li>                    
                                </ul>
                            </li> 
                        </ul>
                    </div>
                </div>
            </div>

            <section id="s6">
                <div style="display:none;" id="minhaDiv6">
                    Teste
                </div>
            </section>


        </div>
    </div>

Answered By - fanfer