PanelBar Collapse does not remove the k-state-selected styling

[Carrie]

Hello,

I have a panel bar with just one item.   Once I have expanded it and then collapse it the highlight is still there.  Using firebug I can see that the "k-state-selected" class is still applied.    When I collapse I want it to go back to the original styling as if it was never expanded.

Please advise how I can accomplish this using the following example - preferable without having to manually remove the styling using Jquery as my implementation will be dynamic so I will not know what the IDs additionally I will have multiple panelbars on the page some of which may be open.

Thanks,
Carrie

@(Html.Kendo().PanelBar()
    .Name("IntroPanelBar")
    .Items(items =>
    {
        items.Add()
            .Text("Getting Started")
            .Content(@<text>
                Just some random content
            </text>);
    })
)

[Dimo]

Hello Carrie,

The observed behavior is by design, because the "selected" and "expanded" states are independent.

You can use the PanelBar's collapse event to remove the k-state-selected CSS class manually. It is applied to the child element of the respective item's <li class="k-item"> element.

http://docs.kendoui.com/api/web/panelbar#events-collapse

Since you will receive the item's <li> element as an event argument, you don't have to hard-code any IDs.

Regards,
Dimo
Telerik

[Carrie]

Thanks for the tip, however I can't seem to get the class to remove.   

I have added the collapse event handler and it is firing however I think there must be something wrong with my jquery call - any advice?

function onCollapse(e) {
        $(e.item).children().removeclass('k-state-selected');
    }

[Dimo]

Hi Carrie,

I recommend you to make sure you see and analyze the Javascript errors that the browser throws.

Object has no method 'removeclass'

On a side note, you may also want to remove the k-state-focused CSS class, which applies a shadow by design.

Regards,
Dimo
Telerik