Accordion pane control in .Net

Here I am describing about how to use Accordionpane.

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 place is small.

These 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 an 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.

Here I'm explaining tell you about 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 these properties to 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 at download links.

The final result should be like:



I hope you like this article.