The WijAccordion control allows users to expand pane content from the top, bottom, left, or right. Simply set the ExpandDirection property to take advantage of this feature.

<cc1:WijAccordion ID="Panel1_WijAccordion" runat="server"

        TargetControlID="Panel1" ExpandDirection="Right">

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. While in Design view of your Web application, navigate to the Visual Studio Toolbox and double-click the Panel control to add a panel to the main content of  your page.
3. Add some content to the panel within the <asp:Panel> tags. For example:

           
   <asp:Panel ID="Panel1" runat="server">
                   <h3>Pane 1</h3>        
                   <div>
                       <p>
                           Pane 1 content here.
                       </p>
                   </div>
           
                   <h3>Pane 2</h3>
                   <div>        
                       <p>     
                           Pane 2 content here.        
                       </p>
                   </div>
   
                   <h3>
                      Pane 3</h3>        
                   <div>
                       <p>
                           Pane 3 content here.
                       </p>
                   </div>
           
                   <h3>
                      Pane 4</h3>
                   <div>
                       <p>
                           Pane 4content here.
                       </p>
                   </div>
   </asp:Panel>
                   
   

4. Use the following markup to add a WijAccordion control to the page and set the TargetControlID to Panel1.

   <cc1:WijAccordion ID="Panel1_WijAccordion" runat="server"
           TargetControlID="Panel1">
   </cc1:WijAccordion>
   

5. Select View | Properties Window in the Visual Studio menu.
6. Click the drop-down list at the top of the Properties window and select Panel1_WijAccordion.
7. Click the drop-down arrow next to the ExpandDirection property and select Top, Right, Left, or Bottom.