Expand Accordion Panes On Mouse Over Header

This is a common requirement I see  among users of the accordion ,

How do I Open Accordion Panes OnMouseOver of  the header and Not on header Click ?

The answer is pretty simple .

Lets walk through this :

a) Setup your Accordion

  <ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="grey" 
            FadeTransitions="false"  FramesPerSecond="25" TransitionDuration="250"  
             HeaderCssClass="dimgreen" EnableViewState="true">
 b) Each of the accordion header Pane will have a <SPAN> tag setup for the header.
     On MouseOver of the Span Tag , we will open the Accordion Pane .
 <ajaxToolkit:AccordionPane runat="server" ID="PaneOne">
               <span onmouseover="Openpane('0',event)">Accordion</span>
               <br />
               <br />
               Expand Accordion Panes on Mouse Over :: Pane 1
               <br />
               <br />

The Span's onmouseover event is handled by the Openpane Function.

c) The javaScript Function Openpane .

 <script language="javascript" type="text/javascript"> 

function Openpane(paneIndex,eventElement) { 
    var behavior = $get("Accordion1").AccordionBehavior; 


Download Complete Example :