Follow the easy steps below to create your solution.
1.
Start your Visual Studio 2005 IDE
2.
Choose Create Web Site from the menu
3.
In this sample application we will use the Visual Basic language for the
sample application
4. Name
the solution AccordionSample
5.
Choose ASP.NET AJAX Control Toolkit Web Site
6.
Choose File System in the location box
7.
Click OK to create the project
8.
Visual Studio 2005 will create your project with a Default.aspx
page and most probably a readme.txt. Go ahead, get rid of the latter file.
9.
Open Default.aspx page in design view.
10. You
noticed that there is a control on the page already called Script Manager.
(Well, AJAX is really a script based implementation of the language
JavaScript). In Short, Script Manager control manages client script for
Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers
the script for the Microsoft AJAX Library with the page. This enables client
script to use the type system extensions and to support features such as
partial-page rendering and Web-service calls.
11. Now
drag a Accordion Control from the Toolkit and drop it on the form in design
mode.
12. It
is preferable if you create a style sheet as included in Listing 1. (If you do
not create this style sheet, you will end up with an accordion with no color
unless you go and specify every style item by yourself).
Listing 1 - StyleSheet.css content
/* Accordion */
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
#master_content .accordionHeader a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}
#master_content .accordionHeader a:hover
{
background: none;
text-decoration: underline;
}
.accordionHeaderSelected
{
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
#master_content .accordionHeaderSelected a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}
#master_content .accordionHeaderSelected a:hover
{
background: none;
text-decoration: underline;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}13. Now
go back to default.aspx and open it in source view (nice HTML Tags)…
14. If
you have added the style sheet…Go to the head section and after the title
section, add the listing 2 in order to include the style sheet to the page.
Listing 2 - Style Sheet Link Reference
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
15. In
the Accordion Tag line make them as in listing 3. Notice the use of some
additional tags for the accordion. The FadeTransitions is used to create the
effect of smooth sliding. Selected Indexed is used to open a pane by default in
our case it is the first pane. Transition duration is giving in milliseconds to
specify how much to take to perform the total opening. And last, the two style
association from the style sheet to give the accordion some color as specified
in the style sheet.
Listing 3 - Accordion Specs in Source Mode
<ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="True"
SelectedIndex="0" TransitionDuration="300" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent">
16. Now
we have our accordion, we have to add panes to it. However, before adding panes
we have to add the panes section inside the accordion.
17. After
adding the pane section, you can create as many panes as you like. But please
note that every pane should have a header and a content tags.
18. In
order how I did construct my panes, take a look at listing 4.
Listing 4 - The complete pane section in HTML
<Panes>
<ajaxToolkit:AccordionPane id="AccordionPane1" runat="server">
<Header> AJAX PANE</Header>
<Content>
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane2" runat="server">
<Header>MY TEST PANE
</Header>
<Content>
THIS IS JUST A TEST OF PANE CONTENT<br />
THIS IS JUST A TEST OF PANE CONTENT<br />
THIS IS JUST A TEST OF PANE CONTENT<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane3" runat="server">
<Header>THIS IS LAST PANE
</Header>
<Content>
HOPE YOU LIKE WHAT YOU SEE<br />
THIS IS JUST A TEST OF PANE CONTENT<br />
HOPE YOU LIKE WHAT YOU SEE<br />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
19. Please
note that coding was necessary here. Also note that the panes can contain any
HTML tags you like.
The final output
will look like the figures shown below
Figure 1 - The Default Output
Figure 2 - Output when the second pane is clicked
