Custom JS functions for horizontal and vertical navigation menus for new design of Application Platform page.

application-page.js

/* ---------------------------------------------------------------------
Application Platform Page JavaScript

Target Browsers: All
Authors: Rachel Baker
------------------------------------------------------------------------ */

'use strict';

// Namespace Object
var APPCELERATOR = APPCELERATOR || {};

// Pass reference to jQuery and Namespace
(function(jQuery, APPCELERATOR){

    APPCELERATOR.HorizontalTabs = {
        $tabItem: $('.js-horizontal-tab'),
        $tabContent: $('.js-horizontal-content'),

        init: function() {
            this.$tabItem.eq(0).addClass('current');
            this.$tabContent.hide().eq(0).show();
            this.bind();
        },

        bind: function() {
            var self = this;

            var horizTabs = this.$tabItem.each(function() {

                $(this).click(function(e) {

                    e.preventDefault();

                    horizTabs.removeClass('current');
                    $(this).addClass('current');

                    self.$tabContent.hide().eq(horizTabs.index($(this))).show();
                });
            });
        }
    };


    APPCELERATOR.VerticalTabs = {
        $tabItem: $('.js-vertical-tab'),
        $tabContent: $('.js-vertical-content'),

        init: function() {
            this.$tabItem.eq(0).addClass('current');
            this.$tabContent.hide().eq(0).show();
            this.bind();
        },

        bind: function() {
            var self = this;

            var horizTabs = this.$tabItem.each(function() {

                $(this).click(function(e) {

                    e.preventDefault();

                    horizTabs.removeClass('current');
                    $(this).addClass('current');

                    self.$tabContent.hide().eq(horizTabs.index($(this))).show();
                });
            });
        }
    };
    // DOM Ready Function
    $(function() {
        APPCELERATOR.HorizontalTabs.init();
        APPCELERATOR.VerticalTabs.init();
    });

})(jQuery, APPCELERATOR);