Introduction:
Convert a pair of headers and content panels into an accordion.
Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the
The panels can be activated programmatically by setting the
Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the
header option for information on how to use custom markup structures.The panels can be activated programmatically by setting the
active option.
<html>
<head>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<!-- CSS -->
<style type="text/css">
#accordion {
font-size: 50%;
}
</style>
<!-- Javascript -->
<script>
$(function () {
$("#accordion").accordion({
heightStyle: "fill"
});
});
</script>
</head>
<body>
<!-- HTML -->
<div style="height: 250px;">
<div id="accordion">
<h3>
Tab 1</h3>
<div>
Tab 1 content</div>
<h3>
Tab 2</h3>
<div>
Tab 2 content</div>
<h3>
Tab 3</h3>
<div>
Tab 3 content</div>
</div>
</div>
</body>
</html>
0 comments :
Post a Comment