ComponentOne Wijmo Open for Juice UI
Quick Start / Step 1 of 3: Creating an Application
In This Topic
    Step 1 of 3: Creating an Application
    In This Topic

    In this topic you will add a Panel control with some content that will eventually become the accordion content.

    1. Begin by creating an ASP.NET Web application. Note that you must add a ScriptManager control to the page.
    2. Install the Juice UI and the Wijmo Juice libraries to your project via NuGet.
    3. While in Design view, navigate to the Visual Studio Toolbox and double-click the Panel control to add a panel to the main content of  your page.
    4. Switch to Source view and add some content within the<asp:Panel> tags. For example:
      Copy Code
      <asp:Panel ID="Panel1" runat="server">
      <div>
                                      Step 1</div>
                              <div>
                                      <h1>
                                              Step 1</h1>
                                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus ac
              nibh viverra faucibus. Mauris non vestibulum dui</div>
                              <div>
                                      Step 2</div>
                              <div>
                                      <h1>
                                              Step 2</h1>
                                      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
              cubilia Curae; Vestibulum ante ipsum primis in faucibus.</div>
                              <div>
                                      Step 3</div>
                              <div>
                                      <h1>
                                              Step 3</h1>
                                      Sed facilisis placerat commodo. Nam odio dolor, viverra eu blandit in,
              hendrerit eu arcu. In hac habitasse platea dictumst.</div>
                              <div>
                                      Step 4</div>
                              <div>
                                      <h1>
                                              Step 4</h1>
                                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus ac
              nibh viverra faucibus. Mauris non vestibulum dui.</div>
      </asp:Panel>
      
    5. In the next step you will use the WijAccordion control to create and customize the accordion.