Introduction
Today we are using an Accordion control in a Metro Style Application that will be implemented using jQuery. It contains multiple panels and each panel has its own header and content area. Here we will implement it for a header <h3> tag and for the content area <p> tag. An Accordion control has the visual facility to display one panel at a time from multiple panels.
In the following we are including the entire code of the HTML file and the JavaScript file to create this mini application.
Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how to create it.
- Open Visual Studio 2012
- File -> New -> Project
- Choose Template -> JavaScript -> Metro Style Application
- Rename the application
![img11.gif]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:
![img2.gif]()
Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following are the contents of the project:
-
JavaScript Code
-
Style Sheet Code
Code :
<script src="/js/default.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function () {
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
Code :
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
margin-top:50px;
width: 680px;
border-bottom: solid 5px #f00;
}
.accordion h3 {
background: #0026ff url(images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 5px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #0094ff;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #fff;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
color:#f00;
}
</style>
Step 4 : The complete code of this application is written below. It contains the code of the HTML file code and JavaScript file code.
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App14</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- App14 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function () {
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
margin-top:50px;
width: 680px;
border-bottom: solid 5px #f00;
}
.accordion h3 {
background: #0026ff url(images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 5px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #0094ff;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #fff;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
color:#f00;
}
</style>
</head>
<body>
<div>
<h1 style="font-size:30px;font-weight:bolder; margin-top:45px">Accordion Control in Metro Apps </h1>
</div>
<div class="accordion">
<h3>Personal Detail</h3>
<p>Name: Shubham Srivastava<br /> Date of Birth: 22 Sep 1987<br />Eyes Color- Black<br />Status- Single</p>
<h3>Qualification Detail</h3>
<p>I have completed MCA in 2010 from Institute of Management Studies Ghaziabad(UP) with 70%. My schooling education completed from GIC Sultanpur in 2001 and 2003 and graduate in Math streem</p>
<h3>Working Profile</h3>
<p>I have done my industrial training in SAP technology in Shiv-vani Oil & Gas Corporation. Currently i am working in MCN Solution Noida as Jr. Software Engineer in .Net Profile</p>
<h3>Current Address</h3>
<p>M.NO: C-31 Sashi Garden Pocket-5 Opposite Bala ji Bhawan Mayur Vihar Phase -1 New Delhi (Delhi)</p>
<h3>Parmanent Address</h3>
<p>Vill- Pratappur Post- Kurwar Block- Kurwar Dist. Sultanpur (UP)</p>
</div>
</body>
</html>
Step 5 : After running this code the output looks like this:
![img3.gif]()
Click on different- 2 panel you can get different -2 information.
![img4.gif]()
![img5.gif]()