Bootstrap not functioning as expected - php

Question

ISSUE RESOLVED:
The issue was related to the path of script calling js. Original script:
````<script src="js/app.js" charset="utf-8"></script>````
Working script:
````<script src="/js/app.js" charset="utf-8"></script>````
The / missing at the beginning was working on initially loaded pages as you navigate deeper into the site it gets thrown off.
I am using the bootstrap accordion with cards to present data to users. When the page was first created as a static page the accordion worked. As soon as I called data to it the accordions lost functionality and can't be opened or collapsed. They stay in the position they are in. Inspecting the webpage shows all the code present but something is blocking the "collapse" function. This is also true of the aria-expanded class. Choosing "true" / "false" have no effect on the class functionality.
I have created a new file, copy and pasted the code into it without the DB calls and verified that it works so it appears the issue is related directly to the PHP calls, the first being:
{{ $department->name }}
The other interesting thing is that after deleting (tried commenting out as well) the DB calls, the page still will not function properly. However, the page where I have not done any data calls but am re-using the same HTML works.
Department.blade.php
<div class="container">
<center><h1 id="">{{ $department->name }}</h1></center>
//Second location data is being called
<center><h1 class="top-space">Mission Statement</h1></center>
<!-- Dynamically allow users with permission to change the mission statement -->
<p id="">{{ $department->mission_statement }}</div>
//Accordion HTML
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
News and Events
</button>
</h5>
</div>
<!-- This should fill with an index view of the department's news and events. OnClick navigate the user to that record in view (layout.single.NandE.blade.php). Control loaded data on-page, only load Card Titles, NandE first. The rest of the card's content should load on a delay to improve user experience -->
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
</div>
</div>
</div>
Test.blade.php (File where accordion works)
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
News and Events
</button>
</h5>
</div>
<!-- This should fill with an index view of the department's news and events. OnClick navigate the user to that record in view (layout.single.NandE.blade.php). Control loaded data on-page, only load Card Titles, NandE first. The rest of the card's content should load on a delay to improve user experience -->
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<ul>
<li>
:
</li>
</ul>
</div>
</div>
</div>
The desired behavior is that when the Department.blade.php file is called the first accordion with news and events is openly displaying the events. On click of the accordion, it should collapse.

Answer 1

Bootstrap's docs say:
Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.
Try changing this:
//Accordion HTML
<div id="accordion">
To this:
//Accordion HTML
<div class="accordion">