Dada uma sidebar
, como faço para obter o efeito de um accordion?
Atualmente, a minha sidebar
funciona quase perfeitamente. Isso quer dizer que, ao clicar em menus que possuem submenus, eles são expandidos. Eu só não estou conseguindo fazer com que um menu expansível recolha (collapse) quando outro menu (também expansível) for selecionado.
Segue meu código da sidebar:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet"<script href="httpssrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/cssjs/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTszjs"></K68vbdEjh4u" crossorigin="anonymous">script>
<script<link src="httpshref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/jscss/bootstrap.min.js"css" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"rel="stylesheet" crossorigin="anonymous"></script>>
<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>
Visualizar o exemplo acima em "Página toda".