Make collapsable menu using Ajax Accordion

7 04 2008

This is sample menu

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

Advertisements

Actions

Information

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




%d bloggers like this: