[RESOLVED]dynamically set the class for a div

I am attempting to dynamically set the ‘in’ attribute for the class

This does not work.

@(r == 0 ? Html.Raw(<div id="@panels[r]" class="panel-collapse collapse in">) :  Html.Raw(<div id="@panels[r]" class="panel-collapse collapse in">))

This below works, unfortunately I would be duplicating a large amount of code in the panel-body.

@if (r == 0)
                                { 
                                <div id="@panels[r]" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        large amount of code here
                                    </div>
                                </div>
                                }
                                else
                                {
                                <div id="@panels[r]" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        same large amount of code here
                                    </div>
                                </div>
                                }

wavemaster

I am attempting to dynamically set the ‘in’ attribute for the class

Based on what? That r == 0? And if so, do what? Display "in"? You could use a function:

@functions{
    public static string ShowIn(int input){
        return input == 0 ? "in" : null;
    }
}

Then in your code ( if the function is placed on the same page):

<div id="@panels[r]" class="panel-collapse collapse @ShowIn(r)">

Hello,

<div id="@panels[r]" class = @(r==0 ? "panel-collapse collapse in": "panel-collapse collapse")>
    <div class="panel-body">
        large amount of code here
    </div>
</div>

Mark as answer if it helped..

@mikesdotnetting:

Perfect that works.

The attribute ‘in” determines if the collapsible panel is collapsed or not.

@ayanmesut:

VS likes the syntax and it compiles as well, however bootstrap does not render that correctly.

<div id="collapse10" class="panel-collapse" "in" collapse=""></div>

The straight if then and also Mike’s solution render correctly:

<div id="collapse10" class="panel-collapse collapse in></div>

Looks like a bug in bootstrap, but thanks anyway!

Leave a Reply