Panel Bar Animation Does not Work

[Brad]

I am unable to get the animation for the panel bar to work in my application.  I literally copied the Demo and still the animation does not work.  I do not understand what is missing.  Clicking on the arrows neither collapses or expands.  It is as if the "click" never happens.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ActivityDetails.aspx.cs" Inherits="ActivityWebApp.ActivityDetails" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PageScripts_Header" runat="server">
    <style>
.aspNetDisabled {
    color: #b6bac1 !important;
    text-decoration: none;
}
.inline-rb input[type="radio"] {
            width: auto;
            margin: 10px;
}
.selected {
        font-weight: bold;
}
ol {
  list-style:none;
  counter-reset:mycounter;
  padding:0;
}
ol li {
  position:relative; 
  margin-left: 30px;
  padding-bottom: 2px;
  line-height:15px;
}
ol li:before {
  content:counter(mycounter); 
  counter-increment:mycounter;
  position:absolute;
  top:0;
  left:-30px;
  width:15px;
  height:15px;
  line-height:15px;
  border-radius:50%;
  color:#fff;
  background:teal;
  text-align:center;
}

</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadPlaceholder" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div style="padding:40px">&nbsp;</div>

    <hr /> 
  <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin">
        <telerik:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1" Width="100%" ExpandMode="MultipleExpandedItems">
            <Items>
                <telerik:RadPanelItem Expanded="True" Text="ASP.NET controls">
                    <Items>
                        <telerik:RadPanelItem Text="RadMenu" />
                        <telerik:RadPanelItem Text="RadTabStrip" />
                        <telerik:RadPanelItem Text="RadPanelBar" />
                        <telerik:RadPanelItem Text="RadpanelBar" />
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="WinForms controls">
                    <Items>
                        <telerik:RadPanelItem Text="RadMenustrip" />
                        <telerik:RadPanelItem Text="RadTabStrip" />
                        <telerik:RadPanelItem Text="RadToolStrip" />
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Other projects">
                    <Items>
                        <telerik:RadPanelItem Text="SiteFinity" />
                        <telerik:RadPanelItem Text="Reporting" />
                        <telerik:RadPanelItem Text="RadAjax" />
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageScripts_Footer" runat="server">
    <script>
        
    </script>
</asp:Content>

[Peter Milchev]

Hello Brad,

Attached you can find the shared snippet placed into a runnable project that animates correctly.

If the issue is replicated only in IE, please ensure the Compatibility mode is disabled:

• https://www.telerik.com/support/kb/aspnet-ajax/details/disable-the-compatibility-view-mode-of-internet-explorer
• https://www.telerik.com/support/kb/aspnet-ajax/details/different-appearance-in-internet-explorer-on-local-and-production-servers

Also, ensure that there are no JavaScript errors in the browser's console and no failing requests in the Network tab of the browser's DevTools(F12).

If the issue persists, modify the attached project to replicate it and attach it to an official support ticket. That would allow us to investigate locally your exact scenario and provide more accurate and specific suggestions.

Regards,
Peter Milchev
Progress Telerik