https://www.afmq.com/js/easy-responsive-tabs.js

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

98                        }
99                        if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
100                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
101                            $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
102                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
103
104                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
105                        } else {
106                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
107                            $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
108                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
109                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
110                        }
111                        //Trigger tab activation event
112                        $currentTab.trigger('tabactivate', $currentTab);
113                    });
114                    //Window resize function                   
115                    $(window).resize(function () {
116                        $respTabs.find('.resp-accordion-closed').removeAttr('style');
117                    });
118                });
119            });
120        }
121    });
122})(jQuery);
123
124// Easy Responsive Tabs Plugin
125$(document).ready(function () {
126
127    $('.Htab').easyResponsiveTabs({
128        type: 'default', //Types: default, vertical, accordion
129        width: 'auto', //auto or any width like 600px
130        fit: true,   // 100% fit in a container
131        closed: 'accordion', // Start closed if in accordion view
132        activate: function (event) { // Callback function if tab is switched
133            var $tab = $(this);
134            var $info = $('#tabInfo');
135            var $name = $('span', $info);
136            $name.text($tab.text());
137            $info.show();
138        }
139    });
140    $('.Vtab').easyResponsiveTabs({
141        type: 'vertical', //Types: default, vertical, accordion
142        width: 'auto', //auto or any width like 600px
143        fit: true,   // 100% fit in a container
144        closed: 'accordion', // Start closed if in accordion view
145        activate: function (event) { // Callback function if tab is switched
146            var $tab = $(this);
147            var $info = $('#tabInfo');
148            var $name = $('span', $info);
149            $name.text($tab.text());
150            $info.show();
151        }
152    });
153});