AJAX Accordion Control Tutorial ASP.NET 4.0
This tutorial will cover the AJAX Accordion Control and how to set it up and use it. This tutorial will also cover styling the Accordion control so that it looks presentable.
Overview
1. Create an Application and prepare it for AJAX Controls
2. Add and setup the Accordion Control
3. Use CSS to style the Accordion Control
We are using Server Intellect and have found that by far, they are the most friendly,responsive, and knowledgeable support team we've ever dealt with!
Create the Application
1. Create a new Empty web Application
2. Right Click on the Project and Navigate to ->Add ->New Item
3. Select a New Web Form and name it default.aspx
4. And keeping with good AJAX Practices we need to add a ToolkitScriptManager to the Form so drag the ToolkitScriptManager Object from the AJAX Control Toolkit Section of the Toolbox
Add and Setup the Accordion Control
5. The Accordion Control is built in a few parts First is the Accordion (the object) then you have the AccordionPanes(each separate window in the Accordion) and then each Pane Has a Header and a Content Spot Like this.
6. So we need to First Add an Accordion Control to the Form by dragging it out of the AJAX Control Toolkit Section of the Toolbar.
7. Now we can add 3 AccordionPane Controls inside of the Accordion Control
8. Then inside of the AccordionPane Controls we add a Header and a Content Section
9. Now We can fill in some Text to all of the Header and Content tags and it should look something like this
10. Once all of the Code is filled out We can Run the Application and look at the page, you will notice that it is just blank black and white text and you can hardly decipher which box is which. This brings us to our next step making it look nice with CSS
Adding CSS to Style Accordion Control
1. Go to the Code section of your Page and Navigate the the <Title> tag
2. Directly under this Tag we need to add this CSS Code
<style type="text/css">
.accordion {
width: 400px;
}
.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;
}
.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;
}
.accordionContent {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
3. Now that the CSS is in place we need to tell the Accordion Control where to get the styles from so inside the Accordion Tag insert this Code
4. CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
5. Now that all the code is in place your form should look like this, if so go ahead and run the Application and view the page with the new style
Conclusion
In this tutorial we showed you how to Use the AJAX Accordion Control in ASP.NET and how to Style it with CSS.
Code Section
Code 1:
<asp:Accordion ID="Accordion1" runat="server” >
<Panes>
<asp:AccordionPane runat="server" ID="Pane1" >
<Header>Pane 1</Header>
<Content>
This content goes inside Pane1 so that we can see it when it is extended
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="AccordionPane1" >
<Header>Pane 2</Header>
<Content>
This content goes inside Pane2 so that we can see it when it is extended
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="AccordionPane2" >
<Header>Pane 3</Header>
<Content>
This content goes inside Pane3 so that we can see it when it is extended
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
Code 2:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Accordia Example</title>
<style type="text/css">
.accordion {
width: 400px;
}
.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;
}
.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;
}
.accordionContent {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" >
<Panes>
<asp:AccordionPane runat="server" ID="Pane1" >
<Header>Pane 1</Header>
<Content>
This content goes inside Pane1 so that we can see it when it is extended
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="AccordionPane1" >
<Header>Pane 2</Header>
<Content>
This content goes inside Pane2 so that we can see it when it is extended
</Content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" ID="AccordionPane2" >
<Header>Pane 3</Header>
<Content>
This content goes inside Pane3 so that we can see it when it is extended
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</form>
</body>
</html>
You can Also Download the Full Exercise Source code.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several,
we went with Server Intellect and have been very happy. They are the most professional,
customer service friendly and technically knowledgeable host we've found so far.
