Html 查看foreach循环中仅适用于第一项的“更多”按钮

我在foreach循环中遍历项目，每个项目都带有一个view more标记。当我点击它时，它会折叠并显示关于该项目的更多信息。我的问题是，它只是为循环中的第一项而崩溃。我如何使它适用于每个退回的项目

 @{
                foreach (var news in Model)
                {
                    <div class="col-md-6 col-sm-6 col-xs-12">

                        <div class="single-item  wow fadeInUp animated animated animated animated">
                            <div class="img-box">
                                <div class="img-holder">
                                    <figure><a href="#"><img src="@news.file.Url" alt=""></a></figure>
                                </div>
                            </div>
                            <div class="news-content">
                                <h4><a href="#">@news.Header</a></h4>

                                <div class="collapse" id="collapseExample">
                                    @news.Description
                                </div>

                                <div class="show-more">
                                    <a data-toggle="collapse" href="#collapseExample" data-parent="collapseExample" aria-expanded="true" aria-controls="collapseExample">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            }

---

这是我的循环

这是因为您正在渲染具有相同ID的多个元素 试试这个

这样它就不会重复ID元素

var index = 1;
foreach(var news in Model){
   [...]

   <div class="collapse" id="collapse_@index">
        @news.Description
   </div>
   <div class="show-more">
       <a data-toggle="collapse" href="#collapse_@index" data-parent="collapseExample" aria-expanded="false" aria-controls="collapse_@index">Read More</a>
   </div>                         

   index++;

   [...]
}