Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Formatação do enunciado e correção de tags
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

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".

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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 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>

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>
<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>

Visualizar o exemplo acima em "Página toda".

Formatação do enunciado e correção de tags
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

Dada uma sidebarsidebar, como faço para obter o efeito de um accordionaccordion?

Atualmente, a minha sidebarsidebar 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 (collapsecollapse) quando outro menu (também expansível) for selecionado.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 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>

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.

<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>

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.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 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>
Fonte Link
fnx
  • 83
  • 8

Sidebar com efeito accordion

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:

<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>