Open AJAX Accordion Panes on MouseOver
The default behaviour of AJAX Accordion is: you click on any Accordion pane (say; any control placed in Accorion Pane Header section) cause that pane to Expand and collapse rest of the panes other than the pane which you clicked.
It is also fairly easy to open Accordion Panes when you "MouseOver" on Pane rather than need to click the pane to open it.
All you need to add a JavaScript function to ahieve that and call it or "MouseOver" event of ImageButton / Link / or any submit control which is placed inside Accordion Pane.
You need to add below script in your page:
<script language="javascript">
function Openpane(paneIndex)
{
//MyAccordion is the ID of AJAX Accordion control
var behavior = $get("<%=MyAccordion.ClientID%>").AccordionBehavior;
behavior.set_SelectedIndex(paneIndex);
}
</script>
You need to pass the current Accordion Pane index as asrument of the above script function and call this function on "MouseOver" event as:
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<a href="" class="accordionLink" onmouseover="Openpane('0')">1. Accordion</a></Header>
<Content>
The Accordion is a web control that allows you to provide multiple panes and display
them one at a time. It is like having several Panes where only one can be expanded
at a time. The Accordion is implemented as a web control that contains AccordionPane
web controls. Each AccordionPane control has a template for its Header and its Content.
We keep track of the selected pane so it stays visible across postbacks.
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
for every pane, you can call the script function on "MouseOver" event by passing the index of that pane as argument.
Thats it! Hope it would be helpful for someone in same need.