Accordion Panel with CSS

Download source - 1.7 MB

Introduction

This tip discusses how to create a good Accordion Panel with CSS, using ASP.NET Ajax Control Toolkit in ASP.NET? Did you know what an Accordion Panel is? Collapsible Divs or All other Page Controls inside a Panel and Hide and show panel without Page Load and without Postback.

Content

Today, I am going to show you how to make a Good Accordion Panel.

Do you know, what an Accordion Panel is? You must have seen some tables or Divs in websites, that can collapse and expand on just Click. You can also call them Collapsible Div or Table.

ASP.NET Ajax Tools make it so much simpler for ASP.NET. You just need to link AjaxControlToolkit.dll to your bin folder and use it in the Page.

Let's add a new Web Form in Solution, this is the Page, where you want to add your collapsible div or table that may contain anything.

The source code for the above design is here:

<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accordian with CSS >> P.Yar.B Complex</title>
    <%--<link href="Accordian.css" rel="stylesheet" />--%>
</head>
 
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table width="100%" border="0">
            <tr>
                <td colspan="2" align="center">
                    <h1>Accordian with CSS</h1>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center">
                    <asp:Accordion ID="Accordion1" runat="server" 
                    HeaderCssClass="accordionHeader" 
                    HeaderSelectedCssClass="accordionHeaderSelected" 
                    ContentCssClass="accordionContent" Width="490px">
                        <Panes>
                            <asp:AccordionPane ID="pane1" runat="server">
                                <Header>Hardwares</Header>
                                <Content>
                                    Mouse
 
                                    KeyBoard
 
                                    Monitor
                                     
 
                                    Printer
 
                                    CPU
 
                                    Speakers
 
                                    Camera
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane2" runat="server">
                                <Header>Operating System</Header>
                                <Content>
                                    MS Windows
 
                                    Linux
 
                                    Android
 
                                    Mac
 
                                    Unix
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane3" runat="server">
                                <Header>.NET IDE</Header>
                                <Content>
                                    Visual Studio
 
                                    Visual Web Developer
 
                                    SharpDevelop
 
                                    MonoDevelop
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane4" runat="server">
                                <Header>John Bhatt</Header>
                                <Content>
                                    <a href="http://www.johnbhatt.com" 
                                    target="_blank">Portal Home</a>
 
                                    <a href="http://blog.johnbhatt.com" 
                                    target="_blank">Blog of P.Yar.B</a>
 
                                    <a href="http://media.johnbhatt.com" 
                                    target="_blank">Download Center</a>
 
                                </Content>
                            </asp:AccordionPane>
                        </Panes>
                    </asp:Accordion>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Now let's see what is in the CSS:

.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;
}

Now run the page again. Let's see how it looks.

Check this on your machine. Best of luck!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

John Bhatt

Software Developer (Senior) P.Yar.B Complex

Nepal

Member

Follow on Twitter
Google+

Google

John Bhatt is an IT Professional having interest in Web technology. He is Web Designer, Developer, Software Developer, Blogger and Technology Geek. Currently he writes his Blogs at Blog of P.Yar.B and various other Sites. He is Main author and founder of Download Center.
Contact Him at : Facebook | Twitter | Website.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

How to create a nice Accordion Panel with CSS

Type	Tip/Trick
Licence	CPOL
First Posted	7 Oct 2012
Views	5,202
Downloads	229
Bookmarked	6 times

ASP.NETCSSAjax
Beginner