Markup and Scripting

The HTML markup for an Expander widget looks like this.

Markup	Copy Code
<div id="expander"> <div> header </div> <div> content </div> </div>

Or this markup creates the exact same expander.

Sample Markup	Copy Code
<div id="expander"> <h1> header </h1> <div> content </div> </div>

You can initialize the widget with the following jQuery script.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijexpander"], function () { $(document).ready(function () { $("#expander").wijexpander ({expanded: false }); }); }); </script>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijexpander"], function () {
        $(document).ready(function () {
            $("#expander").wijexpander ({expanded: false });
        });
    });
</script>

The markup and script featured here results in the following live widget. Click the header to expand it.

Reference

wijexpander API