ComponentOne Extender Controls for ASP.NET Web Forms
Quick Start / Step 3 of 4: Using Wijaccordion
In This Topic
    Step 3 of 4: Using Wijaccordion
    In This Topic

    In this topic, you will use the wijaccordion widget to set the event that expands the accordion panes. This step was included to show that widgets can be used on the same page as extender controls. For more information on the Wijmo widgets, visit http://wijmo.com. 

    1. Enter references for the CSS and JavaScript libraries within the <asp:Content> tags of the project:
      
      <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
      <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
      <link href="http://cdn.wijmo.com/jquery.wijmo-open.1.1.5.css" rel="stylesheet" type="text/css" />
      <link href="http://cdn.wijmo.com/jquery.wijmo-complete.1.1.5.css" rel="stylesheet" type="text/css" />
      <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript">
      </script>
      <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js" type="text/javascript">
      </script>
      <script src="http://cdn.wijmo.com/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript">
      </script>
      <script src="http://cdn.wijmo.com/external/jquery.glob.min.js" type="text/javascript">
      </script>
      <script src="http://cdn.wijmo.com/external/jquery.mousewheel.min.js" type="text/javascript">
      </script>
      <script src="http://cdn.wijmo.com/external/raphael-min.js" type="text/javascript">
      </script>
      <script src="http://cdn.wijmo.com/jquery.wijmo-open.1.1.5.min.js" type="text/javascript">
      </script>
      <script src="http://cdn.wijmo.com/jquery.wijmo-complete.1.1.5.min.js" type="text/javascript">
      </script>
      </asp:Content>
               
      
    1. Enter the following JavaScript after the references within the <asp:Content> tags. The accordion panes will expand when a user mouses over them.
      
       <script id="scriptInit" type="text/javascript">
           $(document).ready(function () {
               $("#<%= Panel1.ClientID %>").wijaccordion({
                   event: "mouseover",
                 
               });
           });
      </script>
                              
      
    1. In the next step, run the project to see your accordion.