Как закрыть аккордеон, когда другой открыл?

Question

У меня есть аккордеон. Это дано в приведенной ниже скрипке. http://fiddle.jshell.net/7vRV9/

В этом случае, когда я нажму группу элементов, которую он откроет, после этого нажмите группу элементов 2. Он также откроется. Но мое требование - когда кто-то открывается, все остальные должны закрываться, если у меня есть несколько (теперь только два). Как реализовать это?

Answer 1

Я надеюсь, что это сработает для вас. Просто замените ниже фрагмент HTML своим HTML-кодом JSFIDDLE. Он начнет работу. Не стесняйтесь спрашивать, есть ли у вас какие-либо сомнения.

<div class="accordion" id="food-category"> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#indian">Indian Food</div> 
    </div> 
    <div class="accordion-body collapse" id="indian"> 
     <ul> 
      <li> Food 1</li> 
      <li> Food 2</li> 
      <li> Food 3</li> 
     </ul> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#sea">Sea Food</div> 
    </div> 
    <div class="accordion-body collapse" id="sea"> 
     <ul> 
      <li> Food 1</li> 
      <li> Food 2</li> 
      <li> Food 3</li> 
     </ul> 
    </div> 
</div> 
<div class="accordion-group"> 
    <div class="accordion-heading"> 
     <div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#chinese">chinese Food</div> 
    </div> 
    <div class="accordion-body collapse" id="chinese"> 
     <ul> 
      <li> Food 1</li> 
      <li> Food 2</li> 
      <li> Food 3</li> 
     </ul> 
    </div> 
</div> 
</div> 

Answer 2

Я изменил код и сделал ниже изменения: -

1. Может быть ID = "accordion1" создает некоторые проблемы, поэтому я переименовал этот идентификатор с customTab и заменены соответственно
2. Добавлено < DIV класс = "гармошка-группа"> для лучшего пользовательского интерфейса

Пожалуйста, проверьте его. Если вам нужна дополнительная помощь, пожалуйста, обновите меня.

Также вы можете скопировать и вставить ниже фрагмент кода в JSfiddle и проверить: -

<div class="accordion " id="customTab"> 
     <div class="accordion-group"> 
      <!-- Element Group Heading --> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse1"> 
       <b>Element Group 1</b> 
       </a> 
      </div> 
      <!-- Elements --> 
      <div id="collapse1" class="accordion-body collapse"> 
       <!-- --> 
        <div class="accordion" id="accordion1-1"> 
         <div class="accordion-heading" style="margin-left: 30px"> 
          <label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1-1" data-target="#collapseOne1-1"> 
          <input type="radio" name="optionsCheckboxList" value="1"/>Element One 
          </label> 
         </div> 
         <div id="collapseOne1-1" class="accordion-body collapse"> 
         <div class="accordion-inner" style="margin-left: 60px"> 

         <!-- Sample Description --> 
         <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/> 
         </div></div> 
        </div> 
        <!-- --> 
        <div class="accordion" id="accordion1-2"> 
         <div class="accordion-heading" style="margin-left: 30px"> 
          <label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1-2" data-target="#collapseOne1-2"> 
          <input type="radio" name="optionsCheckboxList" value="2"/>Element Two 
          </label> 
         </div> 
         <div id="collapseOne1-2" class="accordion-body collapse"> 
         <div class="accordion-inner" style="margin-left: 60px"> 

         <!-- Sample Description --> 
         <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/> 
         </div></div> 
        </div> 
        <!-- --> 
      </div> 
     </div> 

     <div class="accordion-group"> 
      <!-- Element Group Heading --> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse2"> 
       <b>Element Group 2</b> 
       </a> 
      </div> 
      <!-- Elements --> 
      <div id="collapse2" class="accordion-body collapse"> 
       <!-- --> 
        <div class="accordion" id="accordion2-1"> 
         <div class="accordion-heading" style="margin-left: 30px"> 
          <label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2-1" data-target="#collapseOne2-1"> 
          <input type="radio" name="optionsCheckboxList" value="1"/>Element One 
          </label> 
         </div> 
         <div id="collapseOne2-1" class="accordion-body collapse"> 
         <div class="accordion-inner" style="margin-left: 60px"> 

         <!-- Sample Description --> 
         <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/> 
         </div></div> 
        </div> 
        <!-- --> 
        <div class="accordion" id="accordion2-2"> 
         <div class="accordion-heading" style="margin-left: 30px"> 
          <label class="radio" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2-2" data-target="#collapseOne2-2"> 
          <input type="radio" name="optionsCheckboxList" value="2"/>Element Two 
          </label> 
         </div> 
         <div id="collapseOne2-2" class="accordion-body collapse"> 
         <div class="accordion-inner" style="margin-left: 60px"> 

         <!-- Sample Description --> 
         <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/> 
         </div></div> 
        </div> 
        <!-- --> 
      </div> 
     </div> 
</div>