https://isolator.com/wp-content/themes/isolator-theme/js/easy-responsive-tabs.js

1// Easy Responsive Tabs Plugin
2(function ($) {
3    $.fn.extend({
4        easyResponsiveTabs: function (options) {
5            //Set the default values, use comma to separate the settings, example:
6            var defaults = {
7                type: 'default', //default, vertical, accordion;
8                width: 'auto',
9                fit: true,
10                closed: false,
11                activate: function(){}
12            }
13            //Variables
14            var options = $.extend(defaults, options);            
15            var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
16
17            //Events
18            $(this).bind('tabactivate', function(e, currentTab) {
19                if(typeof options.activate === 'function') {
20                    options.activate.call(currentTab, e)
21                }
22            });
23
24            //Main function
25            this.each(function () {
26                var $respTabs = $(this);
27                var $respTabsList = $respTabs.find('ul.resp-tabs-list');
28                $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
29                $respTabs.css({
30                    'display': 'block',
31                    'width': jwidth
32                });
33
34                $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
35                jtab_options();
36                //Properties Function
37                function jtab_options() {
38                    if (jtype == vtabs) {
39                        $respTabs.addClass('resp-vtabs');
40                    }
41                    if (jfit == true) {
42                        $respTabs.css({ width: '100%', margin: '0px' });
43                    }
44                    if (jtype == accord) {
45                        $respTabs.addClass('resp-easy-accordion');
46                        $respTabs.find('.resp-tabs-list').css('display', 'none');
47                    }
48                }
49
50                //Assigning the h2 markup to accordion title
51                var $tabItemh2;
52                $respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");
53
54                var itemCount = 0;
55                $respTabs.find('.resp-accordion').each(function () {
56                    $tabItemh2 = $(this);
57                    var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').html();
58                    $respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext);
59                    $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
60                    itemCount++;
61                });
62
63                //Assigning the 'aria-controls' to Tab items
64                var count = 0,
65                    $tabContent;
66                $respTabs.find('.resp-tab-item').each(function () {
67                    $tabItem = $(this);
68                    $tabItem.attr('aria-controls', 'tab_item-' + (count));
69                    $tabItem.attr('role', 'tab');
70
71                    //First active tab, keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode 
72                    if(options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) {                  
73                        $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
74                        $respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
75                        $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
76                    }
77
78                    //Assigning the 'aria-labelledby' attr to tab-content
79                    var tabcount = 0;
80                    $respTabs.find('.resp-tab-content').each(function () {
81                        $tabContent = $(this);
82                        $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
83                        tabcount++;
84                    });
85                    count++;
86                });
87
88                //Tab Click action function
89                $respTabs.find("[role=tab]").each(function () {
90                    var $currentTab = $(this);
91                    $currentTab.click(function () {
92
93                        var $tabAria = $currentTab.attr('aria-controls');
94
95                        if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
96                            $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); });
97                            $currentTab.removeClass('resp-tab-active');
98                            return false;

99                        }
100                        if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
101                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
102                            $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
103                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
104
105                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
106                        } else {
107                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
108                            $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
109                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
110                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
111                        }
112                        //Trigger tab activation event
113                        $currentTab.trigger('tabactivate', $currentTab);
114                    });
115                    //Window resize function                   
116                    $(window).resize(function () {
117                        $respTabs.find('.resp-accordion-closed').removeAttr('style');
118                    });
119                });
120            });
121        }
122    });
123})(jQuery);