Коллапс бутстрапа в цикле foreach

Question

У меня возникли проблемы с получением сменных панелей для работы внутри моей петли foreach. Когда элемент кликается, все элементы расширяются/убираются, что не то, что я хочу. Я хочу, чтобы каждый элемент был независимым.

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

Я пробовал много разных решений, мой текущий метод основан на https://stackoverflow.com/a/18568997/1366033 Что мне делать с id и href?

Любая помощь была бы принята с благодарностью.

foreach (var item in groupItem){ 

<div class="panel-group" id="accordion"> 
         <div class="panel panel-default" id="panel1"> 
          <div class="panel-heading"> 
           <h4 class="panel-title"> 
            <a data-toggle="collapse" data-target="#collapseOne" 
             href="#collapseOne"> 
             @Html.DisplayFor(modelItem => item.Name) 
            </a> 
           </h4> 

          </div> 
          <div id="collapseOne" class="panel-collapse collapse in"> 
           <div class="panel-body">@Html.DisplayFor(modelItem => item.IdNumber) 
           </div> 
          </div> 
         </div> 

        </div> 

Answer 1

В основном вы создаете панель с петлей и назначая то же id ко всему panel-group и то, что причина проблемы здесь! Таким образом, вы можете попробовать работать, как показано ниже, и обратите внимание, ids должно быть уникальным в DOM

@{int i=0;} 
foreach (var item in groupItem) 
{ 
     <div class="panel-group" id="accordion_@i"> 
       <div class="panel panel-default" id="panel_@i"> 
        <div class="panel-heading"> 
          <h4 class="panel-title"> 
           <a data-toggle="collapse" data-target="#collapseOne_@i" href="#collapseOne_@i"> 
             @Html.DisplayFor(modelItem => item.Name) 
            </a> 
          </h4> 
         </div> 
         <div id="collapseOne_@i" class="panel-collapse collapse in"> 
          <div class="panel-body"> 
           @Html.DisplayFor(modelItem => item.IdNumber) 
          </div> 
         </div> 
       </div> 
     </div> 
     i++; 
}