CSS Styling for AJAX Accordion Control

Some simple CSS styling rules for an AJAX Accordion Control

AJAX

The AJAX Accordian Panel is a great little too that comes as part of the AJAX Toolkit. It saves a lot of space while still allowing you to condense a lot of information into a single page.
Before using this, it may we worth checking up on the following. AJAX Toolkit
The control requires you to download and add to Visual Studio, I won't go into that in this article though.

The control is made of the following parts. Your content for each goes in between the Content Tags.

HTML

<asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" ContentCssClass="accordionContent" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"> <Panes> <asp:AccordionPane ID="PaneOne" runat="server" CssClass="accordion"> <Header>Pane1</Header> <Content> </Content> </asp:AccordionPane> <asp:AccordionPane ID="PaneTwo" runat="server" CssClass="accordion"> <Header>Pane2</Header> <Content> </Content> </asp:AccordionPane> </Panes></asp:Accordion>

AJAX

This is the code I have used to style the accordian pane on my login page, by using the CSS you only need to set the style once, and that is setting the style as CssClass="accordion". You can also see there are three other sections set above.

A breakdown of the code as follows;

accordian is the outer container, all I am setting here are the border radius and widths.

CSS

.accordion{width: 98%;margin: auto;border-radius: 5px;moz-border-radius: 5px;border: 1px solid #6C5A39;background-color: #DED3BE;}

AJAX

Accordian header is the style for all un selected headers.

CSS

.accordionHeader{border-radius: 5px;moz-border-radius: 5px;background-color: #DED3BE;font-weight: bold;text-align: center;padding: 0px 0px 2px 0px;}

AJAX

This is the selected header, by setting this as a different colour the user can easily identify what tab they have selected.

CSS

.accordionHeaderSelected{border-top-right-radius: 5px;border-top-left-radius: 5px;moz-border-top-right-radius: 5px;moz-border-top-left-radius: 5px;border-bottom: 1px solid #6C5A39;background-color: #D1C2A5;font-weight: bold;color: #000000;text-align: center;padding: 0px 0px 2px 0px;}

AJAX

Now we can add some styling to the content area, this sets the colour for the background of the selected tab.

CSS

.accordionContent{border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;moz-border-bottom-right-radius: 5px;moz-border-bottom-left-radius: 5px;background-color: White;}

AJAX

The code above is obviously just the beginning of what you could do.