Now open your aspx page
and write the code like as shown belowAfter completion of aspx page
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="accordion.aspx.cs"
Inherits="accordion"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Flat Accordion Responsive </title>
<style type="text/css">
body{
background: #fff;
font-family: 'Raleway',
sans-serif;
}
body a,form li,.submit input[type="submit"],.new p a,.new p.sign{
transition: 0.1s all;
-webkit-transition: 0.1s
all;
-moz-transition: 0.1s all;
-o-transition: 0.1s all;
}
body h1{
color: #00BFFF;
text-align: center;
padding: 0em 0 1em 0;
text-transform: uppercase;
font-size: 2em;
font-weight: bold;
}
.main {
margin: 10% auto 1%;
width: 30%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family:
'Raleway', sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top,
#ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear,
left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top,
#ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top,
#ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top,
#ffffff 1%,#eaeaea 100%);
background: linear-gradient(top,
#ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #fff;
}
.ac-container input:checked
+ label,
.ac-container input:checked
+ label:hover{
background: #E0FFFF;
color: #000080;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked
+ label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent
url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked
+ label:hover:after{
background-image: url(../images/arrow_up.png);
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255,
255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height
0.3s ease-in-out,
box-shadow 0.6s
linear;
-moz-transition: height
0.3s ease-in-out,
box-shadow 0.6s
linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height
0.3s ease-in-out,
box-shadow 0.6s
linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article
p{
line-height:
23px;
font-size: 14px;
padding: 15px 20px;
font-family: 'Raleway',
sans-serif;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
background-color: #fff;
}
.ac-container input:checked
~ article{
-webkit-transition: height
0.5s ease-in-out,
box-shadow 0.1s
linear;
-moz-transition: height
0.5s ease-in-out,
box-shadow 0.1s
linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height
0.5s ease-in-out,
box-shadow 0.1s
linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked
~ article.ac-small{
height: 140px;
}
.ac-container input:checked
~ article.ac-medium{
height: 180px;
}
.ac-container input:checked
~ article.ac-large{
height: 230px;
}
.login-form p
{
font-size: 0.9em;
text-align: center;
line-height: 1.9em;
color: #fff;
margin-top: 1em;
}
/*==================================================
* Effect 2
*
===============================================*/
.effect2{
position: relative;
}
.effect2:before, .effect2:after{
z-index: -999;
position: absolute;
content: "";
bottom: 11px;
left: 15px;
width: 57%;
top: 84%;
max-width: 348px;
background: rgba(255, 255,
255, 0.85);
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px rgba(179, 175, 175, 0.94);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 15px;
left: auto;
}
/*--start-responsive-design--*/
@media (max-width:1600px){
}
@media (max-width:1440px){
}
@media (max-width:1366px){
}
@media (max-width:1280px){
.main {
margin: 10% auto 1%;
width: 33%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:1024px){
.main {
margin: 10% auto 1%;
width: 41%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:991px){
.main {
margin: 10% auto 1%;
width: 54%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:800px){
.main {
margin: 10% auto 1%;
width: 54%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:768px){
.main {
margin: 10% auto 1%;
width: 54%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:736px){
.main {
margin: 10% auto 1%;
width: 65%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:667px){
.main {
margin: 10% auto 1%;
width: 65%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:640px){
.main {
margin: 10% auto 1%;
width: 65%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:568px){
.ac-container {
width: 310px;
margin: 10px auto 30px auto;
text-align: left;
}
body h1 {
padding: 0em 0 1em 0;
font-size: 1.5em;
}
.main {
margin: 40% auto 1%;
width: 65%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:480px){
.ac-container {
width: 310px;
margin: 10px auto 30px auto;
text-align: left;
}
body h1 {
padding: 0em 0 1em 0;
font-size: 1.5em;
}
.main {
margin: 40% auto 1%;
width: 65%;
background-color: #FFC0CB;
padding: 3em 3em 3em 3em;
}
}
@media (max-width:414px){
.main {
margin: 40% auto 1%;
width: 73%;
background-color: #FFC0CB;
padding: 2em;
}
.ac-container {
width: 264px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container article
p {
line-height: 21px;
font-size: 13px;
padding: 9px 20px;
}
}
@media (max-width:384px){
.main {
margin: 40% auto 1%;
width: 73%;
background-color: #FFC0CB;
padding: 2em;
}
.ac-container article
p {
line-height: 21px;
font-size: 13px;
padding: 9px 20px;
}
.main {
margin: 31% auto 1%;
width: 73%;
background-color: #FFC0CB;
padding: 2em;
}
}
@media (max-width:375px){
.main {
margin: 40% auto 1%;
width: 73%;
background-color: #FFC0CB;
padding: 2em;
}
}
@media (max-width:320px){
.ac-container article
p {
line-height: 21px;
font-size: 12px;
padding: 9px 20px;
}
.ac-container {
width: 221px;
margin: 10px auto 20px auto;
text-align: left;
}
body h1 {
padding: 0em 0 1em 0;
font-size: 1.3em;
}
.main {
margin: 21% auto 1%;
width: 73%;
background-color: #FFC0CB;
padding: 2em;
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="main
effect2">
<section class="ac-container">
<h1>Flat
Accordion </h1>
<div>
<input id="ac-1" name="accordion-1"
type="checkbox"
/>
<label for="ac-1">.NET
Framework(Section 1)</label>
<article class="ac-small">
<p>
.NET Framework is a
complete environment that allows developers to develop, run, and deploy the
following applications:
• Console
applications
• Windows
Forms applications
• Windows
Presentation Foundation (WPF) applications
• Web
applications (ASP.NET applications)
• Web
services
• Windows
services
• Service-oriented
applications using Windows Communication Foundation (WCF)
• Workflow-enabled
applications using Windows Workflow Foundation (WF)
</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1"
type="checkbox"
/>
<label for="ac-2">Intermediate
Language(IL)(Section 2)</label>
<article class="ac-medium">
<p>Intermediate Language is also known as MSIL
(Microsoft Intermediate Language) or CIL (Common Intermediate Language). All
.NET source code is compiled to IL. IL is then converted to machine code at the
point where the software is installed, or at run-time by a Just-In-Time (JIT)
compiler.</p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1"
type="checkbox"
/>
<label for="ac-3">CLS(Section
3)</label>
<article class="ac-large">
<p>Common Language Specification is a set of basic
rules, which must be followed by each .NET language to be a .NET- compliant
language. It enables interoperability between two .NET-compliant languages. CLS
is a subset of CTS; therefore, the languages supported by CLS can use each
other's class libraries similar to their own. Application programming
interfaces (APIs), which are designed by following the rules defined in CLS can
be used by all .NET-compliant languages.</p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1"
type="checkbox"
/>
<label for="ac-4">Manifest(Section
4)</label>
<article class="ac-large">
<p>Assembly metadata is stored in Manifest. Manifest
contains all the metadata needed to do the following things
1. Version
of assembly.
2. Security
identity.
3. Scope
of the assembly.
4. Resolve
references to resources and classes.
The assembly manifest can be stored in a PE file
either (an .exe or) .dll with Microsoft
intermediate language (MSIL code with Microsoft
intermediate language (MSIL) code or in a
stand-alone PE file, that contains only assembly
manifest information.
</p>
</article>
</div>
</section>
</div>
</form>
</body>
</html>
DEMO
