Oxygen Tabs Navigation

This snippet, when added to a Code Block element on a page/template with a Tabs element, will allow you to navigate to a specific tab.

snippet Code

jQuery(document).ready( function($) {
	get_active_hash();

	jQuery('.tab-change').click(function(){

		var tabEl = $(this).prop('hash');
		oxy_change_active_tab(tabEl);

	});

	function get_active_hash() {
		if(location.hash){

			var tabHash = $(location.hash);

			oxy_change_active_tab(tabHash);
		}
	}

	function oxy_change_active_tab(el) {

		if(el){
			var tab = jQuery(el);
			var tabClass = null;
			var tabContent = null;
			var tabIndex = null;

			/*Get the appropriate Tab Class*/
			var classList= $(tab).attr('class');
			var classArr = classList.split(/\s+/);

			$.each(classArr, function(index, value){
				if(value.indexOf('tabs') == 0) {

					var tabSplit = value.split('-');
					tabClass = value;
					tabContent  = 'tabs-contents-'+tabSplit[1]+'-tab';
				};
			});

			/*If Tab Class, perform changes*/
			if(tabClass){

				/*Change the active Tab */
				$('.'+tabClass).each(function(index,tabi){

					if($(tabi).attr('id') === $(tab).attr('id')) {
						$(tab).addClass(tabClass+'-active');
						tabIndex = index;
					} else {
						$(tabi).removeClass(tabClass+'-active');
					}

				})

				/*Change the active Tabs Content*/
				$('.'+tabContent).each(function(index,tabs){
					if(index == tabIndex){
						$(tabs).removeClass('oxy-tabs-contents-content-hidden');
					} else {
						$(tabs).addClass('oxy-tabs-contents-content-hidden');
					}
				})
			}

		}
	}

});
Leave a Reply

Your email address will not be published. Required fields are marked *

    Table Of Contents

    Related Content

    © 2020-2024 Luxibay
    Name(Required)
    Please let us know what's on your mind. Have a question for us? Ask away.
    This field is for validation purposes and should be left unchanged.