ComponentOne Wijmo Open for Juice UI
Wijmo Open for Juice UI Extender Controls / WjAccordion / WijAccordion Task-Based Help / Opening Multiple Panes Simultaneously
In This Topic
    Opening Multiple Panes Simultaneously
    In This Topic

    The WijAccordion control allows you to open the multiple panes at once.

    When the RequireOpenedPane property is set to True, clicking a header will close the currently opened pane, leaving the remaining panes closed. When the RequireOpenedPane property is set to False, clicking a header will not close the currently opened panes.

    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. Set the RequireOpenedPane property to False. When your run the applicationand click each pane header, the opened panes will not close.