JQuery переключить подменю боковой панели на основе активного

Question

У меня есть меню боковой панели, созданное с помощью Bootstrap 4. Чтобы создать подменю, которое расширилось вправо с использованием jQuery.Это выглядит так:

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-1 d-none d-md-block sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link d-flex align-items-center flex-column sidebar" href="#" data-toggle="collapse" data-target="#submenu" aria-expanded="false" id="sidebarCollapse" >
             <%= image_tag 'products.png' %>
             <p>Products</p>
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <!--Product Sidebar-->
<nav id="sidebar">
    <div class="sidebar-header">
        <h3>Bootstrap Sidebar</h3>
    </div>

    <ul class="list-unstyled components">
        <li class="active">
            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                Main Item
            </a>
            <ul class="collapse list-unstyled" id="homeSubmenu">
                <li>
                    <a href="#">Item 1</a>
                </li>
                <li>
                    <a href="#">Item 2</a>
                </li>
                <li>
                    <a href="#">Item 3</a>
                </li>
            </ul>
        </li>

    </ul>
</nav>
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group mr-2">
            <button class="btn btn-sm btn-outline-secondary">Share</button>
            <button class="btn btn-sm btn-outline-secondary">Export</button>
          </div>
        </div>
      </div>

      <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
    </main>
  </div>
</div>

Тогда jQuery:

$(document).ready(function () {
  $('#sidebarCollapse').on('click', function () {
  $('#sidebar').toggleClass('active');
  });
 });

Это в основном работает правильно.Я нажимаю на метку привязки «Продукты», и подменю / боковая панель открывается справа.Однако проблема в том, что когда он неактивен, он покажет боковую панель Bootstrap и основной элемент.Как мне сделать так, чтобы когда боковая панель не была активна, чтобы видимость скрывалась?

Я попробовал следующее с jQuery безуспешно:

$(document).ready(function () {
  $('#sidebar').hide();
    $('#sidebarCollapse').on('click', function (e) {
        e.preventDefault();
        $('#sidebar', this).toggle('active');
    });

});

Answer 1

Есть ли у вас настроенный CSS, чтобы скрыть его изначально?

#sidebar {
display:none;
}
#sidebar.active{
display:block;
}