Click here to Skip to main content
12,505,104 members (61,051 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

26.6K views
890 downloads
6 bookmarked
Posted

Accordion Panel with CSS

, 7 Oct 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to create a nice Accordion Panel with CSS

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 >

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)

Share

About the Author

John Bhatt
Founder P.Yar.B Complex
Nepal Nepal
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 | PRB - Blog.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
NewsMessage Automatically Removed Pin
30-Oct-12 3:10
memberbatibani30-Oct-12 3:10 
QuestionRe: How do you solve a problem like me Pin
John Bhatt30-Oct-12 19:04
memberJohn Bhatt30-Oct-12 19:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160919.1 | Last Updated 7 Oct 2012
Article Copyright 2012 by John Bhatt
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid