.NET Core MVC Bootstrap "Collapse" not working

Question

I'm using it just as described in the docs but I'm not seeing any results. Any ideas?

Index.cshtml:

<div class="post-details">
    <h4>@Html.DisplayFor(modelItem => post.Title)</h4>
    <p>submitted at @Html.DisplayFor(modelItem => post.CreationDate) by @Html.DisplayFor(modelItem => post.OriginalPoster)</p>
    <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#postContent" 
            aria-expanded="false" aria-controls="postContent">+</button>
    <button type="button" class="btn btn-outline-primary btn-sm">comments</button>
    <button type="button" class="btn btn-outline-primary btn-sm">share</button>
    <button type="button" class="btn btn-outline-primary btn-sm">save</button>
    <button type="button" class="btn btn-outline-primary btn-sm">hide</button>
</div>

<div class="collapse" id="postContent">
    <div class="card card-body">
        @Html.DisplayFor(modelItem => post.Content)
    </div>
</div>

Rena · Accepted Answer · 2021-01-12 06:26:26Z

Be sure use Bootstrap v5.0,because it used data-target instead of data-bs-target before v5.0:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Also, aria-controls,data-bs-target and idare all the same(postContent),you need distinguish them like below:

@model IEnumerable<YourModel>

@{int i = 0; }        //add this

@foreach (var post in Model)
{
    <div class="post-details">
        <h4>@Html.DisplayFor(modelItem => post.Title)</h4>
        <p>submitted at @Html.DisplayFor(modelItem => post.CreationDate) by @Html.DisplayFor(modelItem => post.OriginalPoster)</p>
        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#postContent_@i"
                aria-expanded="false" aria-controls="postContent_@i">
            +
        </button>
        <button type="button" class="btn btn-outline-primary btn-sm">comments</button>
        <button type="button" class="btn btn-outline-primary btn-sm">share</button>
        <button type="button" class="btn btn-outline-primary btn-sm">save</button>
        <button type="button" class="btn btn-outline-primary btn-sm">hide</button>
    </div>

    <div class="collapse" id="postContent_@i">
        <div class="card card-body">
            @Html.DisplayFor(modelItem => post.Content)
        </div>
    </div>
    i++;
}

Result:

You're the best! I didn't even realize .NET was shipping an older version of Bootstrap.

dharmatech · Accepted Answer · 2021-03-22 05:24:56Z

1

ASP.NET Core 3.1 comes with Bootstrap 4 by default.

When you lookup documentation on the Bootstrap site, as of this time, Bootstrap 5 documentation is shown by default.

So when using the Bootstrap documentation, use the appropriate version. See for example, the documentation for Collapse in Bootstrap 4:

https://getbootstrap.com/docs/4.6/components/collapse/

As shown there and as Rena points out, Bootstrap 4 uses data-toggle instead of data-bs-toggle.

So you may not need to upgrade to Bootstrap 5. I would recommend simply referencing the Bootstrap 4 documentation.

edited Mar 22, 2021 at 5:24

answered Mar 21, 2021 at 15:02

dharmatech

9,71910 gold badges50 silver badges109 bronze badges

Collectives™ on Stack Overflow

.NET Core MVC Bootstrap "Collapse" not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related