.net 4 with ajax 4 Expand Accordion on mouse over


In Header section add the java script functions:

<script type=”text/javascript”>
function ToggleAccordion(index) {
var acc = $find(‘Accordion1_AccordionExtender’);
if (acc.get_SelectedIndex() == index) {
acc.set_SelectedIndex(-1); //closes all panes
} else {


Add ScriptManager in aspx file:
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />


First add a Accordion, add a pane inside accordion and inside that pane add 3/4 (As much as u want) accordion pane:

<asp:Accordion ID=”Accordion1″ runat=”server” RequireOpenedPane=”false”>
<asp:AccordionPane ID=”AccordionPane1″ runat=”server”>
<Header><div onmouseover=”ToggleAccordion(0);”>Header 1</div></Header>
<Content>Content 1</Content>
<asp:AccordionPane ID=”AccordionPane2″ runat=”server”>
<Header><div onmouseover=”ToggleAccordion(1);”>Header 2</div></Header>
<Content>Content 2</Content>

By simplemsexchange Posted in ASP.NET

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s