Bootstrap 5 Accordion in Partial View (ASP.NET Core) cannot collapse after expanded - asp.net-mvc

Question

I want to generate a MVC partial view with a Bootstrap 5 accordion. Here is the code:
Index.cshtml
#{
ViewData["Title"] = "Home Page";
}
<input type="button" class="load_btn" id="1" value="Load" />
<div id="pv-1"></div>
#section Scripts
{
<script type="text/javascript">
$(function () {
$(".load_btn").click(function () {
var div_id = 'pv-' + $(this).attr('id');
$.ajax({
type: "GET",
url: "/Home/PV",
success: function (response) {
$('#' + div_id).empty();
$('#' + div_id).html(response);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
}
HomeController.cs
...
namespace WebApplication4.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult PV()
{
return View("_PartialView");
}
...
}
}
_PartialView.cshtml
#{
Layout = null;
}
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<div class="accordion" id="2">
<div class="accordion-item">
<h2 class="accordion-header" id="h-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-1" aria-expanded="false" aria-controls="c-1">
First Button
</button>
</h2>
<div id="c-1" class="accordion-collapse collapse" aria-labelledby="h-1">
<div class="accordion-body">
TO DO
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-2" aria-expanded="false" aria-controls="c-2">
Second Button
</button>
</h2>
<div id="c-2" class="accordion-collapse collapse" aria-labelledby="h-2">
<div class="accordion-body">
TO BE
</div>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>
Click the "Load" button, I can get the Accordion successfully, and I can also expand each item, but then I cannot collapse the expanded items.
With another test, I put the accordion in the Index.cshtml directly (without using a Partial View ).
Index.cshtml
Exactly the same code with _PartialView.cshtml
And the Accordion works smoothly (can expand and collapse).
Could you help me on this strange behavior?

Answer 1

The css file and js files shouldn't be present in the _PartialView.cshtml file. The strange behavior (cannot collapse after expanded) was fixed after removing those files.
New code for _PartialView.cshtml
#{
Layout = null;
}
<div class="accordion" id="2">
<div class="accordion-item">
<h2 class="accordion-header" id="h-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-1" aria-expanded="false" aria-controls="c-1">
First Button
</button>
</h2>
<div id="c-1" class="accordion-collapse collapse" aria-labelledby="h-1">
<div class="accordion-body">
TO DO
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-2" aria-expanded="false" aria-controls="c-2">
Second Button
</button>
</h2>
<div id="c-2" class="accordion-collapse collapse" aria-labelledby="h-2">
<div class="accordion-body">
TO BE
</div>
</div>
</div>
</div>