Accordion Pane Control in .NET

The Accordion control represents a series of panes that can be viewed one at a time. So this is so useful where the content publishing space is small.

The following are the key properties.

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.

HeaderTemplate

The Header template contains the markup that should be used for a pane's header when data binding.

ContentTemplate

The Content template contains the markup that should be used for a pane's content when data binding.

The following explains the AccordionPane control:

1. Drag and drop the ToolkitScriptManager and Accordion controls from Ajax Toolkit.
2. Drag and drop the AccordianPane control between pane tags.
3. Add the following properties to the Accordion control:
   
   
   • CssClass,
   • HeaderCssClass,
   • HeaderSelectedCssClass,
   • ContentCssClass

This is the Style sheet I used:

<style type="text/css">

        .accordionpane {

            width: 300px;

        }       

        .accrdHeader {

            border: 1px solid #2F4F4F;

            color: white;

            background-color: #006B54;

            font-family: Arial, Sans-Serif;

            font-size: 12px;

            font-weight: bold;

            padding: 5px;

            margin-top: 5px;

            cursor: pointer;

        }       

        .accrdHeaderSelected {

            border: 1px solid #CBEBFA;

            color: white;

            background-color: #9D6B84;

            font-family: Arial, Sans-Serif;

            font-size: 12px;

            font-weight: bold;

            padding: 5px;

            margin-top: 5px;

            cursor: pointer;

        }       

        .accrdContent {

            background-color: #F5DEB3;

            border: 1px #CBEBFA;

            border-top: none;

            padding: 5px;

            padding-top: 10px;

        }

</style>

This is the Accordin pane stuff:

<asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">

</asp:ToolkitScriptManager>  

<asp:Accordion ID="Accordion2"  CssClass="accordionpane" HeaderCssClass="accrdHeader" 

HeaderSelectedCssClass="accrdHeaderSelected"ContentCssClass="accrdContent" runat="server">

<Panes>

<asp:AccordionPane ID="AccordionPane3" runat="server">

<Header>About Myself</Header>

<Content>

I am Jitendra.SampathiRao. I'm basically from Vishakapatnam. I completed my B.Tech(Computer Science) from JNT University.

I'm presently working in a vizag baseb software company from last two years.

</Content>

</asp:AccordionPane>

<asp:AccordionPane ID="AccordionPane4" runat="server">

<Header>Technical Skill set</Header>

<Content>

<b>My Technical Skill set is:</b><br />Asp.Net, <br />C#.Net, <br />VB.Net, <br />WCF, <br />WPF, <br />Silverlight,<br />Sql

 Server, <br />Mysql,<br /> AJAX, <br /> JQuery.

</Content>

</asp:AccordionPane>

<asp:AccordionPane ID="AccordionPane5" runat="server">

<Header>Hobbies</Header>

<Content>

Playing Cricket,<br />Watching movies, <br /> Net surfing.

</Content>

</asp:AccordionPane>

</Panes>

</asp:Accordion>  

Note: Source Code is available from the download links.

The final result should be like:



I hope you like this article.