3

it doesn't collapse with ids assigned by foreach.

i have tried it with non dynamic ids and it works.

<div class="accordion" id="myAccordion">
    @foreach (var item in Model)
    {
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#@item.Id">
                        @item.Version.Component.Product.Name's @item.Version.Component.Name's @item.Version.ReleaseNumber Version
                    </button>
                </h5>
            </div>
            <div id="@item.Id" class="collapse" data-parent="#myAccordion">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    }
</div>
</div>
kerems
  • 33
  • 3

2 Answers2

2

Numeric ids don't work with Bootstrap accordions (see this question). So prefix the id and data target with a letter. Also when the @ symbol is embedded in a string you have to use parens to identify the code to be executed. 

        <div class="card-header">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#X@(item.Id)">
                    @item.Version.Component.Product.Name's @item.Version.Component.Name's @item.Version.ReleaseNumber Version
                </button>
            </h5>
        </div>
        <div id="X@(item.Id)" class="collapse" data-parent="#myAccordion">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>

As @terrencep mentioned you should look in the brower's page inspector to see the value of data-toggle.

Brad Patton
  • 4,007
  • 4
  • 34
  • 44
  • I have tried this approach and it evaluated to html the same way without parens, still doesn't work. – kerems Sep 11 '19 at 06:30
  • I had ran into the same problem and when I looked at my code I thought the issue was the parens. Its because numeric only ids don't work. Updated my answer and linked to similar question – Brad Patton Sep 11 '19 at 15:37
0

in the inspector, check if #@item.ID evaluating correctly?

Alternatively try data-toggle="collapse-next"

edit:

what is it evaluating to, might it have problematic characters?

terrencep
  • 675
  • 5
  • 16