Menu
I’ve run into a problem using accordions within tabs, the initially inactive accordions do not render their content correctly when their tab is selected. Reading around I see the reason for this is that the inactive tabs have display:none initially, so the height of the divs within the accordion do not get calculated correctly. None of the suggested solutions work for me. Have has anyone overcome this or have a work around?
Here's some example code of the problem:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs();
$("#accordion1").accordion();
$("#accordion2").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="main" class="round roundB">
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a> </li>
<li><a href="#tab2">Tab 2</a> </li>
</ul>
<div id="tab1">
<div id="accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
TAB 1 Accordion 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
TAB 1 Accordion 2
</p>
</div>
</div>
</div>
<div id="tab2">
<div id="accordion2">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
TAB 2 Accordion 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
TAB 2 Accordion 2
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
512
I had the same problem before. The solution is: You must active accordion before tabs.
$("#accordion").accordion(); $("#tabs").tabs(); Maybe you need left align.
.ui-accordion-header{ text-align: left; } good luck
126
After reading the stated problem, it was my impression that a problem I have run into was of a similar nature. Using the accordion functionality within a tab was forcing my accordion content to contain a scrollbar, a feature I did not want.
For some reason or another, the current solution provided did not work for me.
The solution I found was to overwrite the default accordion setting of autoHeight (default of true, overwrite to false)
$("#accordion").accordion({
autoHeight: false
});
$('#tabs').tabs();
Initialize accordion when you activate tab:
sample:
$('.selector').bind('tabsadd', function(event, ui) {
...
});
your sample:
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs();
$('#tabs').bind('tabshow', function(event, ui) {
$("#accordion1").accordion();
$("#accordion2").accordion();
});
});
</script>
Maybe that you will need to initialize every accordion special for each tab.
Or use latest UI lib:
<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
