Hi guys,
I build my own accordeon, because i need multiple panels open at the same time. the content is loaded through a AJAX call. But I try to load a CJuiTabs into the panels of the accordion but that is not working…
the first tabs are working ok, but as soon as i load in the second tabs the tab content etc. is messed up.
page with the accordion:
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<div class="accordion">
<?php foreach($daytrips as $daytrip): ?>
<div class="row">
<div class="info"><?php echo $daytrip->Daytrip; ?></div>
<div class="picture"></div>
</div>
<?php endforeach; ?>
</div>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {
$('.accordion .row').click(function() {
var test = $(this);
test.slideToggle('slow', showContent)
function showContent() {
$.get('/search/test.html', function(data) {
$(data).hide().insertAfter(test).show('slow', function() {
$(".tabs").tabs();
});
});
}
});
});
/*]]>*/
</script>
Page loaded through AJAX:
<div class="demo">
<div>close</div>
<div class="tabs">
<ul>
<li><a href="#tabs-1<?php echo $rand;?>t">Nunc tincidunt</a></li>
<li><a href="#tabs-2<?php echo $rand;?>t">Proin dolor</a></li>
<li><a href="#tabs-3<?php echo $rand;?>t">Aenean lacinia</a></li>
</ul>
<div id="tabs-1<?php echo $rand;?>t">
<p>Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2<?php echo $rand;?>t">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3<?php echo $rand;?>t">
<p>lacus.</p>
<p>Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo.</p>
</div>
</div>
</div>