In
this article I’m going to explain how to use JQuery Accordion in ASP.NET
Accordion displays
collapsible content panels for presenting information in a limited amount of
space. The markup of your accordion container needs pairs of headers and
content panels.
Here I’ll show you how to
create JQuery UI Accordion in ASP.NET. First we have to use following JQuery
library and StyleSheet
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet"
href="CustomStyle.css"
/>
Here we have to use
following JavaScript function for display Accordion
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
Designer source code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>jQuery UI
Accordion</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="CustomStyle.css" />
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:400px; padding-left:100px">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit
et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus,
molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh.
Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada.
Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et
ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit,
dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum
tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie
et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque
purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque
semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante
aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item
three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque
habitant morbi tristique senectus et netus
et malesuada fames ac
turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et
ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam
ut libero. Integer dignissim consequat lectus.
Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</div>
</form>
</body>
</html>