42 lines
1.4 KiB
JavaScript
42 lines
1.4 KiB
JavaScript
jQuery(document).ready(function($){
|
|
var tabItems = $('.cd-tabs-navigation a'),
|
|
tabContentWrapper = $('.cd-tabs-content');
|
|
|
|
tabItems.on('click', function(event){
|
|
event.preventDefault();
|
|
var selectedItem = $(this);
|
|
if( !selectedItem.hasClass('selected') ) {
|
|
var selectedTab = selectedItem.data('content'),
|
|
selectedContent = tabContentWrapper.find('li[data-content="'+selectedTab+'"]'),
|
|
slectedContentHeight = selectedContent.innerHeight();
|
|
|
|
tabItems.removeClass('selected');
|
|
selectedItem.addClass('selected');
|
|
selectedContent.addClass('selected').siblings('li').removeClass('selected');
|
|
//animate tabContentWrapper height when content changes
|
|
tabContentWrapper.animate({
|
|
'height': slectedContentHeight
|
|
}, 200);
|
|
}
|
|
});
|
|
|
|
//hide the .cd-tabs::after element when tabbed navigation has scrolled to the end (mobile version)
|
|
checkScrolling($('.cd-tabs nav'));
|
|
$(window).on('resize', function(){
|
|
checkScrolling($('.cd-tabs nav'));
|
|
tabContentWrapper.css('height', 'auto');
|
|
});
|
|
$('.cd-tabs nav').on('scroll', function(){
|
|
checkScrolling($(this));
|
|
});
|
|
|
|
function checkScrolling(tabs){
|
|
var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
|
|
tabsViewport = parseInt(tabs.width());
|
|
if( tabs.scrollLeft() >= totalTabWidth - tabsViewport) {
|
|
tabs.parent('.cd-tabs').addClass('is-ended');
|
|
} else {
|
|
tabs.parent('.cd-tabs').removeClass('is-ended');
|
|
}
|
|
}
|
|
}); |