I have tabs above my tab content.
As long as my tab content is long, I duplicate my tabs also below the tab content.
So, It looks like:
[tab 1] [tab 2]
--content
[tab 1] [tab 2]
I use css and jQuery.
When I change tab-list above, normally css effects change. but It doesn't change on the bottom tab-list.
And same is also true for bottom; when I change tab on the tab-list bottom, css effects only changes on the bottom but not above tab-list.
I want to change them at once because it looks confusing like that.
HTML:
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">#1 content</div>
<div id="tab2" class="tab">#2 content </div>
</div>
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
</ul>
</div>
</div>
JavaScript:
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
jsFiddle:
*
I was expecting it to work like that because CSS codes are the same, so if it works in tab-list-above, why not working in tab-list-bottom?