jube-fork/Jube.App/wwwroot/kendo/examples/expansionpanel/mvvm.html

<!DOCTYPE html>
<html>
<head>
    <title>MVVM</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">

    <div class="demo-section k-content">
        <div>
            <div id="brazil" data-role="expansionpanel" data-expanded="true" data-title="Brazil" data-sub-title="South America" data-bind="events:{complete: onComplete, collapse: onCollapse, expand: onExpand}">
                The word "Brazil" likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology "red like an ember", formed from brasa ("ember") and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil. Throughout the 16th century, massive amounts of brazilwood were harvested by indigenous peoples (mostly Tupi) along the Brazilian coast, who sold the timber to European traders (mostly Portuguese, but also French) in return for assorted European consumer goods.
            </div>
        </div>
    </div>

    <script>
        var viewModel = kendo.observable({
            onComplete: function () {
                kendoConsole.log("event :: Complete");
            },
            onCollapse: function () {
                kendoConsole.log("event :: Collapse");
            },
            onExpand: function () {
                kendoConsole.log("event :: Expand");
            }
        });
        kendo.bind($("#example"), viewModel);
    </script>
    <style>
        .k-expander-content {
            max-width: 600px;
        }
    </style>
</div>


    
</body>
</html>