:~/writing$ cat "Expand Accordion Panes On Mouse Over Header"
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"> <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 :