Вопрос по Bootstrap, меню аккордеон

jquery использовать, их аккордеон

jquery установлен в связке с Bootstrap, но по идее должно же быть какое то простое решение.

К примеру как реализовано в горизонтальном меню. Там в css добавляется

li.dropdown:hover
ul.dropdown-menu{
display: block;
margin: 0;
}

любой dropdown-конструкции (аккордиону в том числе) в бутстрапе такое поведение можно задать тупо через css безо всяких скриптов: http://ooo-cck.ru/ (см. основное меню). только надо отследить touch устройства - на них :hover отсутствует, есссесссно...

.no-touch {
  #navbar {
    .nav {
      > li {
        &:hover {
          > .dropdown-menu {
            display:block;
            margin-top:0;
          }
        }

        > a {
          &:hover {
            + .dropdown-menu {
              .active {
                > .dropdown-menu {
                  display:block;
                }
              }
            }
          }
        }
      }
    }
  }
}

а дописав скрипт на одну строку можно заодно все "как бе dropdown-toggle" ссылки сделать кликабельными на не touch устройствах, типа:

!Modernizr.touch && ( $('.navbar .nav > li > a').removeAttr( 'data-toggle' ) );

DiAksID, спасибо!

Для меню на <ul> <li> я разобрался. Но я ни как не могу понять как мне реализовать все конкретно для <div>. Перепробовал уже все.

Вот пример кода:

<div class="accordion" id="accordion2">

<div class="accordion-group">

<div class="accordion-heading">

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">

Заголовок 1

</a>

</div>

<div id="collapseOne" class="accordion-body collapse in">

<div class="accordion-inner">

Скрытый текст заголовка 1

</div>

</div>

</div>

<div class="accordion-group">

<div class="accordion-heading">

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">

Зголовок 2

</a>

</div>

<div id="collapseTwo" class="accordion-body collapse">

<div class="accordion-inner">

Скрытый текст заголовка 2

</div>

</div>

</div>

</div>

Помогите понять!

а разницы никакой 😂 ведь неспроста в 3-ем бутстрапе нет компонента "аккордеон", а проходит он как частный случай компонента "дропдавн" + усвойте, что data-togle можно ставить не только на те элементы, которые указаны в примере.

в вашем случае просто сначала уберите все data-togle и сделайте css в котором при наведении мышки на див (class="accordion-heading") с линком-переключателем следующему за ним диву-цели (class="collapse") задавался display: block (селектор +).

на десктопах такой аккордеон будет работать вообще без скриптов.

потом включайте мосК и думайте как прицепить к этому data-togle, что бы аккордеон заработал и на touch...

---

только имейте ввиду, что в стандартном вертикальном аккордеоне действие по клику, а не по наведению - наиболее логичная и удобная форма. почти всё, что сделано в бутстрапе - сдело не просто так, а "по поводу" 😂 ...

Спасибо большое за советы. Буду пробовать разобраться.