I'm attempting to put together a simple tab system where each tab is supposed to appear using a fadeIn effect.
In the code below, the .field element is initially hidden with CSS. Although the tabs are displayed correctly, the desired fadeIn effect is not happening as expected.
HTML:
<div class="block">
<div class="controls">
<a class="one" href="#">First</a>
<a class="two" href="#">Second</a>
</div>
<div class="field field-one active">Field 1</div>
<div class="field field-two">Field 2</div>
</div>
jQuery:
$('.controls .one').click(function(){
$('.field').removeClass('active');
$('.field-one').addClass('active').fadeIn();
});
$('.controls .two').click(function(){
$('.field').removeClass('active');
$('.field-two').addClass('active').fadeIn();
});
CSS:
.field{
display: none;
}
.field.active{
display: block;
}
Demo: