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