ComponentOne Wijmo Open for Juice UI
Wijmo Open for Juice UI Extender Controls / WjAccordion / WijAccordion Task-Based Help / Expanding Accordion Panes on Hover
In This Topic
    Expanding Accordion Panes on Hover
    In This Topic

    The WijAccordion control allows users to expand pane content by hovering the pane. Simply set the Event property to take advantage of this feature.

    <cc1:WijAccordion ID="Panel1_WijAccordion" runat="server" TargetControlID="Panel1" Event="mouseover">
    
    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 Event property to mouseover.  When your run the application, the panes expand when the mouse hovers over the pane headers.