Twitter 내용이없는 부트 스트랩 아코디언 그룹 항목

Question

하위 요소로 확장되는 몇 가지 항목과 열린 항목을 닫을 자식 요소가없는 2 가지 항목 만 사용하여 아코디언을 만들려고합니다.

은 내가 fiddle setup here

당신은 항목 # 3에 볼 수있는 거기 .accordion - 내부 사업부 콘텐츠하지만 난 그게 표시하지 않습니다. 또한 # 4 번 항목에는 아코디언을 완전히 깨뜨리는 .accordion-inside inside #collapse4our가 표시됩니다.

질문 1 : 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 내가 믿는 태그에서 = "#의 collapseThree"요소 HREF를 제거 할 수 있습니다 당신이 찾고있는 것.

그냥 적절한 기능을 사용하여 숨 깁니다.

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

이 당신에게 멋진 슬라이드 전환 효과를 줄 것이다 : 이것에 대해, 나는 열려있는 모든 탭을 닫으려면 링크를 말할 수있는 속성을 추가하고이 jQuery를 기능을 사용하는 방법

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

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

Answer 2

비 JQuery와 솔루션

이 업데이트 된 코드 here.

클릭하면 확대되지 않습니다 내부 3 회 아코디언을보십시오. 그리고 아코디언 - 내면이 붕괴 될 것입니다. 당신은 당신이 그것을 클릭 할 때이 다른 영역을 축소하지 않습니다 괜찮다면

Answer 3

, 당신은이 정확히

Answer 4

.

첵 아웃 완전히 항목 3, 4 클릭되면 아코디언을 나누기 the fiddle