Introduction:
Accordion contains content area with multiple panels,
associated with header in a list.
Accordions are used to split content into multiple sections that can be used
to save space.
Description:
<script src="jquery-1.10.2.js"
type="text/javascript"></script>
<script type="text/javascript"
src="jquery-ui-1.10.3.custom.js"></script>
<link href="jquery-ui-1.10.3.custom"
rel="Stylesheet"
type="text/css"
/>
3. Once the document is ready, initialize accordion with
the div section.
$(document).ready(function () {
$("#divAccordion").accordion();
});
4. In order to work properly, Accordion must be used a
particular set of markup. It should have header and content section.
<h3>Header One</h3>
<div>Content Area</div>
<h3>Header Two</h3>
<div>Content Area</div>
Collapsible – used to set toggle slide effect for the accordion
header.
Heightstyle – based on the contents, accordion content
will adjust.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accordion Menu using Jquery</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script
type="text/javascript">
$(document).ready(function () {
$("#divAccordion").accordion({
collapsible: true,
heightStyle: 'content'
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="divAccordion">
<h3>
Header One
</h3>
<div>
<p>
sample content for Header One.
</p>
</div>
<h3>
Header Two
</h3>
<div>
<p>
sample content for Header Two.
</p>
</div>
<h3>
Header Three
</h3>
<div>
<p>
sample content for Header
Three.
</p>
</div>
</div>
</form>
</body>
</html>
Accordion menu with Jquery ,
Jquery Accordion menu, Create Accordion menu using Jquery, Simple Accordion
Menu, Jquery Accordion menu examples, Accordion menu tutorials, How to make an
accordion menu using Jquery
0 comments:
Post a Comment