Share via

Expand Accordion Panes On Mouse Over Header

  • Article

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 :