jQuery UI Accordion using ASP.NET
Here we will discuss about jQuery UI built in Accordion function which is used to show lots of different sections of data in a small amount of space.
The jQuery UI has a built in Accordion function which is used to show lots of different sections of data in a small amount of space. You can say that it works with nested lists, definition lists, or just nested divs. In the following example I will create an accordion effect that reveals a caption for each thumbnail.
You can also add some basic styling so that the accordion looks more presentable. Now quickly take a look to the source code below.
Code Example
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion 1</title>
<script type="text/javascript" src="jquery.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: normal normal normal small 120% Verdana;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
padding: 7px 15px;
margin: 0;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
.style1
{
font-size: medium;
}
</style>
</head>
<body>
<div class="accordion" style="background-color: #FF8951">
<h3 class="style1"
style="background-color: #FFB9FF; font-family: Verdana; font-weight: bold;">
Panel 1</h3>
<p style="font-family: Verdana; font-size: small">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3 class="style1" style="background-color: #FFB9FF; font-family: Verdana;">Panel 2</h3>
<p style="background-color: #FFF0FF; font-family: Verdana; font-size: small;">Panel
2 Content...</p>
<h3 class="style1" style="background-color: #FFB9FF; font-family: Verdana;">Panel 3</h3>
<p style="background-color: #FFF0FF; font-family: Verdana; font-size: small;">Panel
3 Content...</p>
<h3 class="style1" style="background-color: #FFB9FF; font-family: Verdana;">Panel 4</h3>
<p style="background-color: #FFF0FF; font-family: Verdana; font-size: small;">Panel
4 Content...</p>
<h3 class="style1" style="background-color: #FFB9FF; font-family: Verdana;">Panel 5</h3>
<p style="background-color: #FFF0FF; font-family: Verdana; font-size: small;">panel
5 Content...</p>
</div>
</body>
</html>
Output Window
