.net 4 with ajax 4 Expand Accordion on mouse over

Step:1

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 {
acc.set_SelectedIndex(index);
}
}
</script>

Step:2

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

Step3:

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”>
<Panes>
<asp:AccordionPane ID=”AccordionPane1″ runat=”server”>
<Header><div onmouseover=”ToggleAccordion(0);”>Header 1</div></Header>
<Content>Content 1</Content>
</asp:AccordionPane>
<asp:AccordionPane ID=”AccordionPane2″ runat=”server”>
<Header><div onmouseover=”ToggleAccordion(1);”>Header 2</div></Header>
<Content>Content 2</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>

Advertisements
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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s