Twitter Элемент группы аккордеона Bootstrap без содержимого

Question

Я пытаюсь сделать аккордеон только с несколькими элементами, которые расширяются с помощью дочерних элементов и двух элементов, которые не имеют дочерних элементов, которые закрывают все открытое.

У меня есть fiddle setup here

Вы можете увидеть на пункт № 3 есть содержание в .accordion-внутренний DIV, но я не хочу, чтобы отображаться. Также вы увидите, что на позиции № 4 нет .accordion-inner внутри #collapseFour, который полностью нарушает аккордеон.

Вопрос 1: Возможно ли это с помощью аккордеона Bootstrap Twitter?

Вопрос 2: Есть ли лучший способ обойти этот процесс?

Код:

<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"> 
     Collapsible Group Item #1 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
     <div class="accordion-inner"> 
     Anim pariatur cliche... 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
     Collapsible Group Item #2 
     </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     Anim pariatur cliche... 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
     Collapsible Group Item #3 
     </a> 
    </div> 
    <div id="collapseThree" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     This is where i do not need child elements 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour"> 
     Collapsible Group Item #4 
     </a> 
    </div> 
    <div id="collapseFour" class="accordion-body collapse"> 

    </div> 
    </div> 
</div> 

Answer 1

jsFiddle Я считаю, что это точно что ты ищешь.

просто спрятать их, используя соответствующие функции.

$('#collapseFour').on('show', function() { 
    $('#collapseFour').collapse('hide'); 
}); 

$('#collapseThree').on('show', function() { 
    $('#collapseThree').collapse('hide'); 
}); 

Answer 2

Non- Jquery Решение

Попробуйте обновленный код here.

3-гармошки внутренний не будет расширяться при нажатии. И показанный аккордеон-внутренний рухнет.

Answer 3

Если вы не возражаете, что она не развалится другие области при нажатии на нее, вы можете просто удалить HREF = элемент «# collapseThree» из тега

Answer 4

Как об этом, я добавил атрибут сказать ссылки, чтобы закрыть все открытые вкладки и использовать эту функцию JQuery:

$('a[data-close]').click(function() { 
    $($(this).data('parent')).find('.in').collapse('toggle'); 
}); 

Это даст вам хороший слайд-переключатель эффекта.

Chek из the fiddle