Bootstrap Collapsible Panel not collapsing
<p>I am trying to make a collapsible panel, however when pressed, nothing happens.</p>

<p>Here are the CSS files I am using:</p>

<pre><code>// Loads all of the CSS styling files needed for view pages to display correctly.
bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/Content/bootstrap.css",
          "~/Content/jasny-bootstrap.css",
          "~/Content/PagedList.css",
          "~/Content/bootstrap-datetimepicker.css",
          "~/Content/Site.css"));
</code></pre>

<p>Here are all of the JS files I am using:</p>

<pre><code>// Loads all of the JavaScript files that are needed for view pages to function
// correctly.
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
          "~/Scripts/moment.js",
          "~/Scripts/moment-with-locales.js",
          "~/Scripts/jquery-2.1.4.min.js",
          "~/Scripts/bootstrap.js",
          "~/Scripts/jasny-bootstrap.js",
          "~/Scripts/respond.js",
          "~/Scripts/bootstrap-datetimepicker.js",
          "~/Scripts/jquery-ui-i18n.js"));
</code></pre>

<p>These are then rendered using:</p>

<pre><code>@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/bootstrap")
</code></pre>

<p>Now for my actual code where the collapsable panel is:</p>

<pre><code>@using (Html.BeginForm("Index", "Item", FormMethod.Get, new { @class = "form-inline" }))
{
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;h4 class="panel-title"&gt;
                &lt;a data-toggle="collapse" href="#collapse"&gt;Collapsible Group&lt;/a&gt;
            &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapse" class="panel-collapse collapse"&gt;
            &lt;div class="panel-body"&gt;
                Everything goes here...
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
}
</code></pre>

<p>Any help would be greatly appreciated.</p>