Tips and Tricks with ajax accordion control
Introduction
Accordion is a web control with multiple collapsible panes with only one pane active at a time. Ajax accordion control uses another control called as accordianpane to display its several panes. Each accordion control has header content and display content. Accordion control keeps track of the active pane and hides this pane if any other accordianpane is made visible. Accordion control can be set to the data source. It has DataSource and DataSourceId properties which allow you to set it properties just like any standard asp.net controls.
Properties of Accordion Control
Below are some of the common properties of accordion control.
HeaderSelectedCssClass: This property let you specify the CSS class for the selected AccordionPane header. This property can be set for the whole accordion control or the individual accordionpane control.
HeaderCssClass: This property let you define the CSS class for styling the header section of all AccordionPane controls. This property also can be set for the whole accordion control or the individual accordionpane control.
ContentCssClass: This property let you specify the name of the CSS class for styling the content area of the AccordionPane controls.
FadeTransitions: This Boolean property will determine whether you want to show fading effect while moving from one pane to other
TransitionDuration: This property let you define the speed of transition between panes in milliseconds.
FramesPerSecond: This property is used along with the TransitionDuration property. This property allows you to specify the number of frames per second to be used during transition between AccordionPane controls.
SelectedIndex: This property let you select the accordion pane based on its index value starting from 0.
In my sample demo, I have four accordion panes each with small details on one of the demi-gods in Hinduism. Below is the code of accordion control along with one of the four accordion panes.
<ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="true" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FramesPerSecond="60" RequireOpenedPane="true" SuppressHeaderPostbacks="false" TransitionDuration="200">
<Panes>
<ajaxToolkit:AccordionPane ID="accVishnu" runat="server">
<Header>1. Vishnu</Header>
<Content>
Vishnu (Sanskrit: विष्णु) is a main Vedic God (including His different avataras<br />
<asp:Image ID="Image2" runat="server" ImageUrl="Vishnu.jpg" Width="200" />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
When I run the application, my output looks like
As you see above, only one pane is visible at a time. On clicking any of the remaining panes, current pane hides and the selected pane becomes visible. For Example on clicking the third pane, my screen looks like
Open pane on mouse over
By default, pane expands on click of a mouse left button. To expand the pane on mouseover, we can use the below chunk of code
Add the JavaScript function Openpane on accordion pane mouse over
<ajaxToolkit:AccordionPane ID="accVishnu" runat="server">
<Header>
<a href="" onmouseover="Openpane('0')">1. Vishnu</a>
</Header>
<Content>
For the first pane, parameter 0 is passed to this function. For second, parameter is 1 and so on.
JavaScript function is
function Openpane(paneIndex) {
var behavior = $get("<% =Accordion1.ClientID%> ").AccordionBehavior;
behavior.set_SelectedIndex(paneIndex);
}
Dynamically Adding mouse over on Accordion Pane
If we have many accordion controls, then adding a mouse over event on every accordion control is quite cumbersome. Below JavaScript code will make our task very easy in such cases. Below JavaScript will loop through all the accordion panes to add a mouse over event to each pane. Additionally, you can write a custom logic of skipping some of the accordion panes
function AddMouseOverToAccordion() {
var acc = $get("<% =Accordion1.ClientID%> ").AccordionBehavior;
for (paneIdx = 0; paneIdx < acc.get_Count(); paneIdx++) {
$addHandler(acc.get_Pane(paneIdx).header, "mouseover", acc._headerClickHandler);
}
}
Expand Pane using its ID
Usually, we select the accordion pane at runtime using selected index property. But in some complex scenarios, you may be hiding some of the accordion control and hence determining the exact order of visible accordion control is quite troublesome. So, there is arising need to select the accordion pane by its id.
Below is the code which lets you select the accordion pane by its id.
protected void SetPane(Accordion ac, string PaneID)
{
int Index = 0;
foreach (AjaxControlToolkit.AccordionPane pane in ac.Panes)
{
if (pane.Visible == true)
{
if (pane.ID == PaneID)
{
ac.SelectedIndex = Index;
break;
}
Index++;
}
}
}
Hiding accordion pane using JavaScript
You can also hide an accordion pane dynamically using JavaScript as
function hideAccordionPane(paneno) {
var acc = $get("<% =Accordion1.ClientID%> ").AccordionBehavior;
acc.get_Pane(paneno).header.style.display = "none";
acc.get_Pane(paneno).content.style.display = "none";
}