루프를 사용하여 아코디언 만들기 - 부트 스트랩

Question

아코디언을 만들려면 필드를 반복하려고합니다. 그것은 정보를 얻고 올바르게 반환합니다. 유일한 문제는 패널을 클릭 할 때 다른 패널이 닫히지 않는다는 것입니다. 어떤 아이디어가 이것을 고치는 방법? 그것은 여러 개의 패널을 가지고 있기 때문에 당신은 루프의 외부에 추가 <div class="panel panel-default">이

는

 #elseif ($column.getChild("features").value == "Accordion") 
      #set ($accordions = $_XPathTool.selectNodes($column, "accordion")) 
      #set ($accHeading = $column.getChild("accHeading").value)  

      <h2>$_SerializerTool.serialize($column.getChild("accHeading"), true)</h2> 
      <div class="panel-group" id="accordian"> 
       <div class="panel panel-default">  

      #foreach ($accordion in $accordions) 
       #set ($accTitle = $accordion.getChild("accTitle").value) 
       #set ($accContent = $accordion.getChild("accContent").value) 

        <div class="panel-heading">  
         <h4 class="panel-title"> 
           <a data-toggle="collapse" data-parent="#accordion" href="#collapse${foreach.index}">${accTitle}</a> 
         </h4> 
        </div> 
         <div id="collapse${foreach.index}" class="panel-collapse collapse"> 
          <div class="panel-body">${accContent}</div> 
         </div> 
      #end 
       </div> 
      </div> 

Answer 1

, 이것은 foreach는 내부에 있어야한다. 올바른 부트 스트랩 아코디언 구조를 살펴보십시오. http://getbootstrap.com/javascript/#collapse-example-accordion