How to toggle hide/show menu button in jquery?

Question

css

Powered by Bootstrap!
There is a menu with links

<div class="page-sidebar" id="main-menu">
        <div class="page-sidebar-wrapper scrollbar-dynamic" id="main-menu-wrapper">
            <?= \app\widgets\WidgetMainMenu::widget() ?>
        </div>
    </div>

If the user logs in from a smartphone, then this menu is hidden and the button for switching (showing | hiding) the menu is displayed

<ul class="nav pull-left notifcation-center visible-xs" id="main-menu-toggle-wrapper">
                <li class="dropdown"> <a id="main-menu-toggle" href="#main-menu"  class="" >
                    <div class="iconset top-menu-toggle-white"></div>
                    </a> 
                </li>
            </ul>

Tell me how to write code in JS or Jquery that will switch this menu.
jQuery version v2.2.4

Answer 1

Bootstrap responds with
.dropdown
.dropdown-toggle

Answer 2

For example device.js, and then put the classes. Although maybe everything is in the bootstrap itself ...

Answer 3

www.jasny.net/bootstrap/components/#navmenu-offcanvas
i did this