https://blumob.com.br/js/easyResponsiveTabs.js

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

88                        }
89                        if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
90                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
91                            $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
92                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
93
94                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
95                        } else {
96                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
97                            $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
98                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
99                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
100                        }
101                    });
102                    //Window resize function                   
103                    $(window).resize(function () {
104                        $respTabs.find('.resp-accordion-closed').removeAttr('style');
105                    });
106                });
107            });
108        }
109    });
110})(jQuery);
111