Я пытаюсь показать конкретные данные пользователя через коллапс bs4

Question

Отображение всей пользовательской записи с использованием цикла foreach

View

<div class="row tab-content" id="pills-tabContent">
    <div class="col-md-12 tab-pane fade show active" id="pills-donner" role="tabpanel" aria-labelledby="pills-donner-tab">
        @foreach (var item in Model)
        {
                <div class="media pb-3">
                    <img class="mr-3 border rounded-circle" src="data:image/jpeg;base64,@Convert.ToBase64String(item.DP)" width="100" height="100">
                    <div class="media-body">
                        <div class="row member">
                            <div class="col-6">
                                <h3>
                                    <a asp-action="Profile" asp-controller="Accounts" asp-route-id="@item.Id">@item.userName</a>

                                    <small>
                                        @if (item.crId == 1)
                                        {
                                            <span>Donner</span>
                                        }
                                    </small>
                                </h3>
                                <span>
                                    <i class="fal fa-clock"></i> @item.Created.ToString("yyyy")
                                </span>
                            </div>

                            <div class="col-6 pl-5 pt-3">
                                <a class="float-right" data-toggle="collapse"  href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                                    <i class="fas fa-angle-double-down"></i>
                                </a>
                            </div>
                            <div class="col-12">
                                <div class="collapse" id="collapseExample">
                                    <div class="card card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                                    </div>
                                </div>
                            </div>
                        </div>                           
                    </div>
                </div>
           }
    </div>

Результат

Когда вы нажимаете на ссылку со стрелкой вниз над изображением, все детали пользователя открываются, но я хочу показать, как свернуть эту деталь, как это сделать? и я также попробую этот user @ item.Id в сворачивать ссылку и div, но не работает.

Answer 1

Вы можете использовать @item.Id для указания уникального идентификатора для каждого блока свертывания в коде цикла.

@{ 
   var UnqiueId = "collapseExample" + item.Id;
}

<div class="col-6 pl-5 pt-3">
<a class="float-right" data-toggle="collapse" href="#@UnqiueId" role="button" aria-expanded="false" aria-controls="@UnqiueId">
    <i class="fas fa-angle-double-down"></i>
</a>
</div>
<div class="col-12">
<div class="collapse" id="@UnqiueId">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>
</div>