Thanks for getting back to me Jason!
By broken, I mean that clicking on the tabs does nothing.
I added an alert to the onClick. The alert doesn't pop up either, so you were right about the scripts. Dev tools show that the JS file is loading, but I added the script to the page for good measure. Still doesn't work.
The reason I pulled out all the liquid is that I don't need this to be manipulated through the settings. I might not be reading the liquid correctly, and perhaps it's part of the function?
I wish I could show you the pages but they're protected.
Here's the JS
theme.Tabs = (function () {
return {
/***** Private Properties *****/
//Selectors used for jQuery targeting
_selectors: {
tabsContainer: '.js-tabs-container',
tabLinks: '.js-tabs-link',
tabContentsContainer: '.js-tabs-content-container',
tabHeight: '.checkMyHeight',
activeTab: '.active',
activeContent: '.current'
},
//Classes used to be added/removed/checked against
_classes: {
checkHeight: 'checkMyHeight',
activeTab: 'active',
activeContent: 'current'
},
/*
=function init(container)
Initializes the click events for the tabs, which controls the fade
animation. Also sets up the window resize event to resize the content
=Params
(mixed) container: Value can be a jQuery selector string, jQuery
object, or element. The value should return the
container of the cart.
*/
init: function (container) {
var self = this;
var tabSpeed = 200;
var $container = $(container);
var $tabsContainer = $container.find(self._selectors.tabsContainer);
var $tabCotentsContainer = $container.find(self._selectors.tabContentsContainer);
var $tabLinks = $tabsContainer.find(self._selectors.tabLinks);
//Set up the tab clicks
$tabLinks.click(function (e) {
alert("you clicked this tab");
var $this = $(this);
//Get the currently active tab
var $activeTab = $tabsContainer.find(self._selectors.activeTab);
//Get the tab contents and their IDs
var activeContentTab = '.js-tab-' + $activeTab.data('tab');
var newContentTab = '.js-tab-' + $this.data('tab');
//Only switch the tabs if they aren't the same tabs
if (activeContentTab !== newContentTab) {
var $activeContent = $tabCotentsContainer.find(self._selectors.activeContent);
var $newContent = $tabCotentsContainer.find(newContentTab);
//Switch the active tab link
$activeTab.removeClass(self._classes.activeTab);
$this.addClass(self._classes.activeTab);
//Set up the content height class
$newContent.addClass(self._classes.checkHeight);
$activeContent.removeClass(self._classes.checkHeight);
//Resize to fit the new content
self._resize($tabCotentsContainer);
//Perform the fade transition
$activeContent.fadeOut(tabSpeed, function () {
$activeContent.removeClass(self._classes.activeContent);
$newContent.fadeIn(tabSpeed, function () {
$newContent.addClass(self._classes.activeContent);
//Resize to fit the new content
self._resize($tabCotentsContainer);
});
});
}
return false;
});
//Set up the resize event
$(window).resize(self._resize.bind(this, $tabCotentsContainer));
},
_resize: function ($tabCotentsContainer) {
$tabCotentsContainer.height($tabCotentsContainer.find(this._selectors.tabHeight).outerHeight());
}
};
}());
Again thank you so much!
