Make collapsable menu using Ajax Accordion

We will make it using Ajax accordian pane.

Following is the format.

<cc1:Accordion ID=”TeacherAccordion” runat=”server”>

<panes>

<cc1:AccordionPane ID=”AccordionPane1″ runat=”server”>
<Header> Manage Videos </Header>
<Content>

//Here all your contents goes

</Content>

</cc1:AccordionPane>

</panes>

</cc1:Accordion>

2. Now this is sample code with full action

<cc1:Accordion ID=”TeacherAccordion” runat=”Server” ContentCssClass=”dividera” HeaderCssClass=”divider” SelectedIndex=”0″ FadeTransitions=”true” TransitionDuration=”250″ FramesPerSecond=”40″ RequireOpenedPane=”false” SuppressHeaderPostbacks=”true”>
<Panes>
<cc1:AccordionPane ID=”AccordionPane1″ runat=”server”>
<Header> Manage Videos </Header>
<Content>
<a href=”UploadVideos.aspx”>Upload Videos</a><br />
<a href=”MyVideos.aspx”>My Videos</a><br />
<a href=”MyFavoriteVideos.aspx”>Favorite Videos</a><br />
<a href=”SearchVideos.aspx”>Search Videos</a><br />
</Content>
</cc1:AccordionPane>

</Panes>
<Panes>
<cc1:AccordionPane ID=”AccordionPane2″ runat=”server”>
<Header> Manage Schools </Header>
<Content>
<a href=”JoinSchool.aspx”>Join School</a><br />
<a href=”SearchSchool.aspx”>Search School</a><br />
</Content>
</cc1:AccordionPane>
</Panes>

</cc1:Accordion>

• SelectedIndex – The AccordionPane to be initially visible
• HeaderCssClass – Name of the CSS class to use for the headers. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.
• HeaderSelectedCssClass – Name of the CSS class to use for the selected header. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.
• ContentCssClass – Name of the CSS class to use for the content. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.
• FadeTransitions – True to use the fading transition effect, false for standard transitions.
• TransitionDuration – Number of milliseconds to animate the transitions
• FramesPerSecond – Number of frames per second used in the transition animations
• AutoSize – Restrict the growth of the Accordion. The values of the AutoSize enumeration are described above.
• RequireOpenedPane – Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.
• SuppressHeaderPostbacks – Prevent the client-side click handlers of elements inside a header from firing (this is especially useful when you want to include hyperlinks in your headers for accessibility)
• Panes – Collection of AccordionPane controls
• HeaderTemplate – The Header template contains the markup that should be used for an pane’s header when databinding
• ContentTemplate – The Content template contains the markup that should be used for a pane’s content when databinding
• DataSource – The data source to use. DataBind() must be called.
• DataSourceID – The ID of the data source to use.
• DataMember – The member to bind to when using a DataSourceID

These are very basic things for asp.net accordian pane. Hope you will find it helpful.

Thanks Tahir Rauf