Sidebar with accordion effect

Question

Given a sidebar, how do I get the effect of a accordion?

Currently, my sidebar works almost perfectly. This means that by clicking menus that have submenus, they are expanded. I’m just not getting to make an expandable collection menu (Collapse) when another menu (also expandable) is selected.

Follow my sidebar code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <li>
      <a href="javascript:;" data-toggle="collapse" data-target="#acc-dashboard"><i class="fa fa-window-restore sb-icon text-center"></i><span class="sb-span">Dashboards</span>
      <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-dashboard" class="collapse">
        <li class="nav-item-1">
          <a href="#"><span class="sb-span">Entregas</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Mesas</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a href="javascript:;" data-toggle="collapse" data-target="#acc-financeiro"><i class="fa fa-dollar sb-icon text-center"></i><span class="sb-span">Financeiro</span>
      <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-financeiro" class="collapse">
        <li>
          <a href="#"><span class="sb-span">Contas a receber</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Contas a pagar</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

View the above example in "Whole Page".

Answer 1

See an example using the component dropdown bootstrap:

By clicking on Execute, visualize in Whole page, to the right of the Run button.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">
        <i class="fa fa-window-restore sb-icon text-center"></i>
        <span class="sb-span">Dashboards</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i>
      </a>
      <ul class="dropdown-menu">
        <li class="nav-item-1">
          <a href="#"><span class="sb-span">Entregas</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Mesas</span></a>
        </li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">
        <i class="fa fa-dollar sb-icon text-center"></i>
        <span class="sb-span">Financeiro</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i>
      </a>
      <ul class="dropdown-menu">
        <li>
          <a href="#"><span class="sb-span">Contas a receber</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Contas a pagar</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

It basically consists of you adding the class dropdown to the parent element of the element that will open the menu. In your case, how the elements will be a those responsible, add the class dropdown to the elements li. To the elements a add the attribute data-toggle="dropdown" and the elements ul that represent the submenus add the class dropdown-menu. This way the menu behavior will be exactly what you want. I believe the default behavior of the accordion is to keep items open even when others are also open and it would not be very recommended to change this behavior, as the code ends up being inconsistent. I believe that the dropdown does well what you need.

Answer 2

I found the solution. I had to make some modifications and use the class panel in the tags li of my sidebar.

Was basically like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="accordion1" class="nav navbar-nav side-nav">
    <li class="panel">
      <a data-toggle="collapse" data-parent="#accordion1" href="#acc-dashboard">
        <i class="fa fa-window-restore sb-icon text-center"></i><span class="sb-span">Dashboards</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-dashboard" class="collapse">
        <li class="nav-item-1">
          <a href="#"><span class="sb-span">Entregas</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Mesas</span></a>
        </li>
      </ul>
    </li>
    <li class="panel">
      <a data-toggle="collapse" data-parent="#accordion1" href="#acc-financeiro">
        <i class="fa fa-dollar sb-icon text-center"></i><span class="sb-span">Financeiro</span>
        <i class="fa fa-fw fa-angle-right pull-right"></i></a>
      <ul id="acc-financeiro" class="collapse">
        <li>
          <a href="#"><span class="sb-span">Contas a receber</span></a>
        </li>
        <li>
          <a href="#"><span class="sb-span">Contas a pagar</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>