Change Expand Direction

The wijexpander widget allows users to expand pane content from the top, bottom, left, or right. Simply set the expandDirection option to take advantage of this feature. See the Expander > ExpandDirection sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/expander/ExpandDirection for an example.

Complete the following steps to set the expand direction:

Create a new C1 ASP.NET MVC 5 Web Application (see Creating an MVC Classic Project)..
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div id="expander">
<h3>Header</h3>
<div>Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus non magna. Nam ligula elit, pretium et, rutrum non,

```
hendrerit id, ante. Nunc mauris sapien, cursus in.
</div>
</div>
```
This markup will add content for an expander widget to the page. In the next step, you'll set the expand direction for the expanders.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijexpander widget and set the expandDirection option:

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#expander").wijexpander({ expandDirection: "top" });
        });
        </script>
<div style="clear:both;float:none;"> </div>
<div><label for="selEasing2">Easing: </label> </div>
<select id="expandDirection" onchange="applyOptions()" onclick="applyOptions()">
<option value="top" selected="selected">top</option>
<option value="right">right</option>
<option value="bottom">bottom</option>
<option value="left">left</option>
</select>
<script type="text/javascript" language="javascript">
    function applyOptions() {
        $("#expander").wijexpander("option", "expandDirection", $("#expandDirection").get(0).value);
    }
</script>

This will add a drop-down box with four values. At run time choose a direction from the drop-down box to change the expand direction of the wijexpander widget.

What You've Accomplished

Press F5 to run the application, and choose a direction from the drop-down box. The expand direction of the wijexpander widget will change as well.