Friends I am back with a new thing for you. Today I am going to show you, how to make a Good Accordion Panel in ASP.NET. In this article, we will learn how to make a nice-looking Accordion Panel with the help of CSS in ASP.NET.
Do you know, what is Accordion Panel in ASP.NET?
You must have seen some tables or Div’s in website, those are collapsing and expanding on just Click. You can also call them Collapsible Div or Table. ASP.NET Ajax Tools make it so Simpler for ASP.NET. You just need to link AjaxControlToolkit.dll to your bin folder and use it in the Page. We will be using ASP.NET Ajax Accordion Control for this purpose.
Design: where we want to implement Accordion Panel in ASP.NET?
Let’s add a new Web Form in Solution, this is the Page, where you want to add your collapsible div or table what may contain anything. In this article, you can learn how to use Ajax Accordion Control in ASP.NET webpage.
Source Code for Design above 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="Accordion.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<br />
KeyBoard<br />
Monitor
<br />
Printer<br />
CPU<br />
Speakers<br />
Camera
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="pane2" runat="server">
<Header>Operating System</Header>
<Content>
MS Windows<br />
Linux<br />
Android<br />
Mac<br />
Unix
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="pane3" runat="server">
<Header>.NET IDE</Header>
<Content>
Visual Studio<br />
Visual Web Developer<br />
SharpDevelop<br />
MonoDevelop
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="pane4" runat="server">
<Header>John Bhatt</Header>
<Content>
<a href="https://pyarb.com/wp-content/uploads/2012/10/www.johnbhatt.com" target="_blank">Portal Home</a><br />
<a href="//www.pyarb.com/wp-content/uploads/2012/10/blog.johnbhatt.com" target="_blank">Blog of P.Yar.B</a><br />
<a href="https://pyarb.com/wp-content/uploads/2012/10/media.johnbhatt.com" target="_blank">Download Center</a><br />
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</td>
</tr>
</table>
</form>
</body>
</html>CSS for making Accordion work in ASP.NET Ajax
Cascading Style Sheet or CSS are scripts those work with HTML elements and make visuals of webpage appealing and help keep uniform. If you are new to CSS or want to learn about CSS, please refer below article.
Introduction of CSS with 3 Types Explained. Cascaded Style Sheet – Part 1
Now Let’s See the CSS, what is on 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;
}Output: Accordion Panel in ASP.NET with help of CSS
Now, if we refresh the Page again, we should see the result as expected. Let’s See, how it looks.
Check this at your machine. Best of Luck! Subscribe to us on YouTube for latest tech tutorials.
PS: Sorry for typing mistake in spelling of Accordion on Image and Code.
