By default, the C1ExpanderExtender expands downward when the header is clicked. You can customize the expand direction with the ExpandDirection property. In this example you'll add an expander control and four radio buttons that can be used to set the expander's expand direction at run time.

Complete the following steps:

1. Create a new ASP.NET Web application.
2. In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
3. Switch to Source view, and add the following markup at the top of the page to register the assembly:

<%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1Expander" TagPrefix="Expander" %>

Note that you may need to edit the above depending on the assembly you are using.

4. And add the following markup within the main <div> tag to add a Panel control and set the expander extender:

<asp:Panel ID="Panel1" runat="server">

    <h3>header</h3>

    <div>wijexpander widget allows the user to show or hide any embedded or external content by clicking on an expander header.</div>

</asp:Panel>

<Expander:C1ExpanderExtender ID="Panel1_ExpanderExtender" runat="server" TargetControlID="Panel1">

</Expander:C1ExpanderExtender>

5. And add the following markup just below the expander markup to add four radio buttons:

          <fieldset class="radio">

    <legend>Select expand direction</legend>

    <label><input type="radio" name="ExpandDirection" value="top" onclick="setExpandDirection('top');" />top</label>

    <label><input type="radio" name="ExpandDirection" value="right" onclick="setExpandDirection('right');" />right</label>

    <label><input type="radio" name="ExpandDirection" value="bottom" onclick="setExpandDirection('bottom');" checked="checked" />bottom</label>

    <label><input type="radio" name="ExpandDirection" value="left" onclick="setExpandDirection('left');" />left</label>

</fieldset>

6. These buttons will be used to set the expand direction at run time.
7. Add the following script to set the expand direction at run time.

<script type="text/javascript" language="javascript">

    function setExpandDirection(direction) {

$("#<%=Panel1.ClientID%>").wijexpander("option", "expandDirection", direction);

    }   

</script>

What You've Accomplished

Press F5 to run your application and select a radio button to change the expander's expand direction at run time. You can click the expander's header to view how the expander's expand and collapse actions have changed.