How to add css class to only first item in list using razor?

Sep 22, 2014 at 10:09 PM
I'm working on a list that uses Bootstrap collapse. I want it to have accordion functionality where other panels close when one is opened.

How can I get the "in" class to only apply to the first item in the list?
<div class="panel-group" id="@Content.EntityId-accord">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#@Content.EntityId-accord" href="#@Content.EntityId">
                    @Content.Question@Html.Raw(Content.Toolbar)
                </a>
            </h4>
        </div>
        <div id="@Content.EntityId" class="panel-collapse collapse in">
            <div class="panel-body">
                @Html.Raw(Content.Answer)
            </div>
        </div>
    </div>
</div>
Sep 22, 2014 at 10:26 PM
Here is my setup
@functions {

}
<div class="panel-group" id="SexyStrap_Accordion-@Dnn.Module.ModuleID">
    @{ 
        int rowCounter = 0;
        var mid = Dnn.Module.ModuleID;

    }

    @* Build up the panels *@

    @foreach (var e in List)
    {
        var Content = e.Content;
        var cid = Content.EntityId;

        var cssClasses = new List<string> { };
        cssClasses.Add("panel-collapse");
        cssClasses.Add("collapse");
        
        if (rowCounter == 0)
        {           
                cssClasses.Add("in");

        }

        var allCSS = new HtmlString((cssClasses.Count == 0) ? null : string.Join(" ", cssClasses));
            
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="SexyStrap_Accordion-@Dnn.Module.ModuleID" href="#SexyStrap_Accordion_Panel-@cid">@Content.PanelTitle
                    </a>
                </h4>
            </div>
            <div id="SexyStrap_Accordion_Panel-@cid" class="@allCSS">
                <div class="panel-body">
                    @Html.Raw(Content.Toolbar)
                    @Html.Raw(Content.Content)
                </div>
            </div>
        </div>
            
            
        <div class="@allCSS" id="tab-content-@mid-@cid">
        </div>

        rowCounter = rowCounter + 1;
    }

</div>
Coordinator
Sep 23, 2014 at 6:07 AM
I like shorthands - so if you use a row-counter like @nokiko, then you could always add something like this
<div id="@Content.EntityId" class="panel-collapse collapse @(rowCounter==0 ? "in" : "")">
this uses the condition ? result-true : result_false statement. so if rowcounter is 0, output an "in", else a blank string

Love from Switzerland
Daniel

PS: note - you might need extra brackets, then it would look like
<div id="@Content.EntityId" class="panel-collapse collapse @((rowCounter==0) ? "in" : "")">
Sep 23, 2014 at 1:53 PM
Edited Sep 23, 2014 at 1:55 PM
Daniel, I couldn't get the shorthand to work without getting a "could not render template" error. However, I used a longhand version of your if statement, as well as the rowCounter as Nokiko mentioned, and got it to work.

Nokiko, your sample helped me figure out that I needed the panel-group div outside of the foreach. Also, the name SexyStrap_Accordion made me laugh... Perfect name for 2sxc/Bootstrap combos!

Thanks again for the help. Here's the working code:
<div class="panel-group" id="accord-@Dnn.Module.ModuleID">
            @{
                int rowCounter = 0;
            }

            @foreach (var e in List)
            {
                var Content = e.Content;
                var cid = Content.EntityId;
                var inClass = "";

                if (rowCounter == 0)
                {
                    inClass = "in";
                }
                else
                {
                    inClass = "";
                }

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accord-@Dnn.Module.ModuleID" href="#panel-@cid">
                                @Content.Question@Html.Raw(Content.Toolbar)
                            </a>
                        </h4>
                    </div>
                    <div id="panel-@cid" class="panel-collapse collapse @inClass">
                        <div class="panel-body">
                            @Html.Raw(Content.Answer)
                        </div>
                    </div>
                </div>
                rowCounter = rowCounter + 1;
            }
        </div>
Coordinator
Sep 23, 2014 at 2:44 PM
Coordinator
Sep 23, 2014 at 2:45 PM
Edited Sep 23, 2014 at 2:53 PM
BTW
@Html.Raw(Content.Toolbar) 
isn't necessary any more, use
@Content.Toolbar
For the Answer you still need it, but not for the toolbar.