Expand Accordion Panes On Mouse Over Header

PhaniRajuYN — Mon, 10 Sep 2007 22:56:58 GMT

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">
            <Panes>
               ::::
            </Panes>
</ajaxToolkit:Accordion>

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">
          <Header>
               <span onmouseover="Openpane('0',event)">Accordion</span>
           </Header>
           <Content>
               <br />
               <br />
               Expand Accordion Panes on Mouse Over :: Pane 1
               <br />
               <br />
           </Content>
</ajaxToolkit:AccordionPane>

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; 
    behavior.set_SelectedIndex(paneIndex); 
}

</script>

Download Complete Example :

With Great Power comes Great Response.write("Ability") : Accordion

Expand Accordion Panes On Mouse Over Header