By default, the WijExpander 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 an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
2. 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>        
   

   <cc1:WijExpander ID="Panel1_WijExpander" runat="server" TargetControlID="Panel1">       
   

   </cc1:WijExpander>
   

3. 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>
   

   These buttons will be used to set the expand direction at run time.

4. 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.