Nesting Accordian inside tabbed Content
Hi I am very new to jQueryUI and have come accross a problem I am unable to sort out, I was wondering if someone could help me out?
When I try to nest the accordian inside a tab the accordian stops working? I don't get any js errors so I suspect it is CSS related?
- <!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<link type="text/css" href="css/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/javascript">
//setup
$(document).ready(function() {
//init date picker
$('#eDealDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
//init tabs
$(function() {
$("#tabs").tabs();
});
//init accordian
$(function() {
$("#accordion").accordion();
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>
tab 1 content
</p>
</div>
<div id="tabs-2">
<!--START ACCORDIAN-->
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
section 1 content
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
section 2 content
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
section 3 content
</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
section 4 content
</p>
</div>
</div>
<!--END ACCORDIAN-->
</div>
<div id="tabs-3">
<p>
tab 3 content
</p>
</div>
</div>
</body>
</html>