HTML:
<ul id="
mode">
<li><a href="#tab1">tab1</a>
<div class="extra">tada</div>
</li>
<li><a href="#tab2">tab2</a>
<div class="extra">tada</div>
</li>
</ul>
<div id="tab1" class="tab-content" style="display: none">content 1</div>
<div id="tab2" class="tab-content" style="display: none">content 2</div>
?
jQuery:
$(function(){
var
mode = $('#mode');
var arrow = $('<span/>', {'class': 'arrow'});
$('li a', mode).bind('click.mytabs', function() {
$('li', mode).removeClass('active');
$(this).parent().addClass('active').append(arrow);
var a = $(this).attr('href');
$('.tab-content').hide();
$(a).show();
return false;
}).filter(':first').triggerHandler('click.mytabs'); // eq(0) works as well
});
JSFiddle here: http://jsfiddle.net/wwMJL/
I'd like to also show each li's 'extra' div on click and hide when the tab is inactive, what do I need to change in the code?
Thanks!
