collapsed Boolean(default: true)

If set to false the widget content will be expanded initially. The content of the widget is collapsed by default.

Example - create initially expanded collapsible panel

<div id="home" data-role="view">
    <div id="collapsible" data-role="collapsible" data-collapsed="false">
        <h2>Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed purus sed orci aliquet dapibus.</p>
    </div>
</div>

<script>
var app = new kendo.mobile.Application();
</script>

<!-- <script src="../src/kendo.mobile.application.js"></script> -->

collapseIcon String(default: "minus")

Sets the icon for the header of the collapsible widget when it is in a collapsed state.

Example

<div id="home" data-role="view">
    <div id="collapsible" data-role="collapsible" data-collapse-icon="arrow-up" data-expand-icon="arrow-down">
        <h2>Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

<script>
    var app = new kendo.mobile.Application();
</script>

<style>
    /*
        define custom icon names, full list of available icons can be found at:
        https://docs.telerik.com/kendo-ui/mobile/icons
    */
    .km-arrow-up:after,
    .km-arrow-up:before {
        content: "\e011";
    }

    .km-arrow-down:after,
    .km-arrow-down:before {
        content: "\e012";
    }
</style>
In this article