Brian Alltop Brian Alltop - 3 months ago 24
C# Question

Bootstrap Multiple collapse panels within side-navigation bar

Currently, I am building a web application with ASP.NET MVC5 using Bootstrap and jQuery.

I have the users add groupings to a 'cart' contained in a collapsible side navbar:

<div id="cart" class="sidebar-nav">
<div class="row">
<div class="col-sm-12">
<div id="groupAddBtn" class="btn btn-primary btn-block">Add New Grouping</div>
</div>
</div>
<div id="cartItems">
@Html.Partial("CartPartialView", Session["ShoppingCart"])
</div>
</div>


Within this cart, I am rendering a partial view that contains the cart items and it is updated with new items via an AJAX call to my HomeController:

@using Project.Models
@model Cart

@foreach (CartGroup group in Model.CartGroups)
{
<br />
<div class="panel-group">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading CartItem collapsed" role="button" id="@(group.GroupName + "_header")" data-toggle="collapse" href="#@(group.GroupName + "_body")">
<label class="groupNameLbl">@group.GroupName</label>
<div class="btn btn-danger btn-xs pull-right RemoveGroupBtn"><span class="glyphicon glyphicon-trash"></span></div>
</div>
<div class="panel-collapse collapse in" id="@(group.GroupName +"_body")">
<div class="panel-body">

@if (group.CartItems != null && group.CartItems.Count > 0)
{
foreach (CartItem item in group.CartItems)
{
<div class="row">
<div class="panel panel-success">
<div class="panel-heading CartItemBody">
<span class="glyphicon glyphicon-plus" role="button" id="@(group.GroupName + "_" + item.CartItemID + "_" + item.CartItemSubID + "_" + item.CartItemSubSubID)" data-toggle="collapse" aria-expanded="false" data-target="#@(group.GroupName + "_" + item.CartItemID + "_" + item.CartItemSubID + "_" + item.CartItemSubSubID + "_body")" aria-controls="#@(group.GroupName + "_" + item.CartItemID + "_" + item.CartItemSubID + "_" + item.CartItemSubSubID + "_body")"></span> <label>@item.CartItemName</label>
<div class="btn btn-danger btn-xs pull-right RemoveCartItemBtn"><span class="glyphicon glyphicon-minus-sign"></span></div>
</div>
<div class="panel-body collapse" id="@(group.GroupName + "_" + item.CartItemID + "_" + item.CartItemSubID + "_" + item.CartItemSubSubID + "_body")">
<table class="table table-bordered">
<tr>
<td><strong>CartItemProp1</strong></td>
<td><strong>@item.CartItemID</strong> <i>@item.CartItemProp1</i></td>
</tr>
<tr>
<td><strong>CartItemProp2</strong></td>
<td><strong>@item.CartItemSubID</strong> <i>@item.CartItemProp2</i></td>
</tr>
<tr>
<td><strong>CartItemProp3</strong></td>
<td><strong>@item.CartItemSubSubID</strong> <i>@item.CartItemProp3</i></td>
</tr>
</table>
</div>
</div>
</div>
}
}
else
{
<p>There are currently no items in this grouping.</p>
}
</div>
</div>
</div>
</div>
</div>


The Problem:
The first grouping that is added and all subsequent items added to this group expand/collapse as they should. Each item will display it's contents when the span with the glyphicon is clicked.

Any additional groupings or items added WILL NOT collapse/expand. The IDs are being generated correctly and there is definitely an event firing when the group/items are clicked but they do not animate as they should. If I remove the topmost, initial group the second group left in the cart will still not expand/collapse.

I do not know if this is related to the dynamic nature of the add/remove functions of the cart items, but it will not work even on a page refresh. I have reworked the markup several times with no luck. Any advice would be appreciated.

SOLVED: The IDs for the panel groups are being built using Razor. It is necessary to remove/replace any IDs with spaces in them: https://www.w3.org/TR/html5/dom.html#the-id-attribute

Ended up being a very silly problem.

Answer

SOLVED: The IDs for the panel groups are being built using Razor. It is necessary to remove/replace any IDs with spaces in them: https://www.w3.org/TR/html5/dom.html#the-id-attribute

This can be achieved without any effect on the displayed HTML by simply replacing the space with an underscore:

    foreach (CartGroup group in Model.CartGroups)
{

     var GroupNameID = group.GroupName.Replace(" ", "_");

    <br />
    <div class="row">
        <div class="panel-group" id="@(GroupNameID)">

Ended up being a very silly problem.