Is there any way to add items to kendo panelbar on button click?

Question

I am working on an app in which I need to add items to kendo panelbar on button click. These panels need to be expandabale/collapseble. Is there a way to do this?

Answer 1

<ul id="panelbar"></ul>
<script>
    $("#panelbar").kendoPanelBar();

    var panelBar = $("#panelbar").data("kendoPanelBar");
    panelBar.append(
        [
            {
                text: "Item 1",
                cssClass: "myClass",                            // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
                url: "http://www.telerik.com/"                  // link URL if navigation is needed, optional.
            },
            {
                text: "<b>Item 2</b>",
                encoded: false,                                 // Allows use of HTML for item text
                content: "text"                                 // content within an item
            },
            {
                text: "Item 3",
                contentUrl: "http://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
            },
            {
                text: "Item 4",
                imageUrl: "http://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
                expanded: true,                                 // item is rendered expanded
                items: [{                                       // Sub item collection.
                    text: "Sub Item 1"
                },
                {
                    text: "Sub Item 2"
                }]
            },
            {
                text: "Item 5",
                // item image sprite CSS class, optional
                spriteCssClass: "imageClass3"
            }
        ]
    );
</script>

Reference: http://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar#methods-append