ComponentOne Wijmo Open for Juice UI
Wijmo Open for Juice UI Extender Controls / WjAccordion / WijAccordion Tutorial / Step 1 of 4: Adding Accordion Content
In This Topic
    Step 1 of 4: Adding Accordion Content
    In This Topic

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

    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. Switch to Source view and add some content to the panel. For example:
      Copy Code 
      <asp:Panel ID="Panel1" runat="server">


<h3>Pane 1</h3>

                <div>

                    <p>

                        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.

                        Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a

                        nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.

                        Vestibulum a velit eu ante scelerisque vulputate.

                    </p>
          </div>

                <h3>Pane 2</h3>

                <div>

                    <p>


                        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
             hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

                    </p>

                </div>

                <h3>

                   Pane 3</h3>

                <div>

                    <p>

                        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus

                        pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque

                        semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam

                        nisi, eu iaculis leo purus venenatis dui.

                    </p>

                </div>

                <h3>

                   Pane 4</h3>

                <div>

                    <p>

                        Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada

                        fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et

                        ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

                    </p>

                    <p>

                        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class

                    </p>

                </div>

</asp:Panel>

    Now add a WijAccordion to the page.