Tabby Responsive Tabs - Version 1.0.1

Version Description

  • Updated js & css
Download this release

Release Info

Developer numeeja
Plugin Icon 128x128 Tabby Responsive Tabs
Version 1.0.1
Comparing to
See all releases

Code changes from version 1.0.0 to 1.0.1

Files changed (6) hide show
  1. css/responsive-tabs.css +0 -60
  2. css/tabby.css +128 -0
  3. js/responsiveTabs.js +0 -202
  4. js/tabby.js +206 -0
  5. readme.txt +69 -35
  6. tabby-responsive-tabs.php +13 -10
css/responsive-tabs.css DELETED
@@ -1,60 +0,0 @@
1
- @media (max-width: 767px) {
2
- .tab-list { display: none;}
3
- .tabs.enabled .tab-heading { cursor:pointer; }
4
- .tabs.enabled .tab-heading.active-tab-heading { cursor: default; }
5
- .hidden-mobile { display: none;}
6
- }
7
-
8
- @media (min-width: 768px) {
9
- .tabs.enabled .tab-heading { display: none;}
10
- .tab-list li { display: inline; cursor:pointer;}
11
- .hidden-mobile { display: block !important;}
12
- }
13
-
14
- /* END - Required for core functionality of tab.js */
15
-
16
-
17
-
18
- /* OPTIONAL - Basic Skin */
19
-
20
- .tab-panel { margin-bottom:50px;}
21
- .tabs.enabled .tab-heading:focus,
22
- .tabs.enabled .tab-list { margin-left: 0!important; }
23
- .tabs.enabled .tab-list li:focus { outline: 1px solid #ccc; }
24
- .tabs.enabled .tab-heading.active-tab-heading:focus,
25
- .tabs.enabled .tab-list li.active-tab:focus { outline: none !important;}
26
-
27
-
28
- @media (max-width: 767px) {
29
- .tabs.enabled .tab-heading {
30
- padding: 0.5em; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
31
- background: #ddd;
32
- position: relative;
33
- }
34
-
35
- .tabs.enabled .tab-heading:after {
36
- content:"";
37
- display: block;
38
- position: absolute;
39
- right: 20px;
40
- top: 40%;
41
- width: 0px;
42
- height: 0px;
43
- border-left: 10px solid transparent;
44
- border-right: 10px solid transparent;
45
- border-top: 10px solid #000;
46
- }
47
- .tabs.enabled .tab-heading:hover,
48
- .tabs.enabled .tab-heading.active-tab-heading:hover { background-color: #efefef}
49
- .tabs.enabled .tab-heading.active-tab-heading { background: #fff;}
50
- .tabs.enabled .tab-heading.active-tab-heading:after { border-bottom: 10px solid #000; border-top:0; }
51
- }
52
-
53
- @media (min-width: 768px) {
54
- .tabs.enabled .tab-list { margin: 20px 0 0 0; border-bottom: 1px solid #ddd; padding: 7px;}
55
- .tabs.enabled .tab-list li.tab { background: #eee; line-height: 1; font-size: 18px; padding: 10px 20px 6px; margin: 0 10px 0; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #ddd; }
56
- .tabs.enabled .tab-list li.tab:hover { background: #ddd; }
57
- .tabs.enabled .tab-list li.tab.active-tab { background: #fff; border-bottom-color: #fff;}
58
- }
59
-
60
- /* END - Optional - Basic Skin */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
css/tabby.css ADDED
@@ -0,0 +1,128 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* === CORE CSS Do not change this section === */
2
+
3
+ .responsive-tabs__heading { display: none; }
4
+ .responsive-tabs__list__item { display: inline; cursor:pointer; }
5
+
6
+ @media (max-width: 767px) {
7
+ .responsive-tabs__list { display: none; }
8
+ .responsive-tabs__heading { display: block; cursor: pointer; }
9
+ .responsive-tabs__panel--closed-accordion-only { display: none; }
10
+ }
11
+
12
+ @media (min-width: 768px) {
13
+ .responsive-tabs__panel--closed-accordion-only { display: block; }
14
+ }
15
+
16
+ /* === Basic design === */
17
+
18
+ .responsive-tabs-wrapper {
19
+ clear: both;
20
+ margin-bottom: 20px;
21
+ zoom: 1;
22
+ }
23
+ .responsive-tabs-wrapper:before,
24
+ .responsive-tabs-wrapper:after {
25
+ content: "";
26
+ display: table;
27
+ }
28
+ .responsive-tabs-wrapper:after {
29
+ clear: both;
30
+ }
31
+
32
+ .responsive-tabs__heading:focus,
33
+ .responsive-tabs__list__item:focus {
34
+ outline: 1px solid transparent;
35
+ }
36
+
37
+ .responsive-tabs__heading--active:focus,
38
+ .responsive-tabs__list__item--active:focus {
39
+ outline: none;
40
+ }
41
+
42
+ .responsive-tabs .responsive-tabs__list {
43
+ font-size: 18px;
44
+ margin: 20px 0 5px 0;
45
+ padding-bottom:0;
46
+ line-height: 1;
47
+ }
48
+
49
+ .responsive-tabs__list__item {
50
+ padding: 10px 20px 10px;
51
+ margin: 0 14px 0 0;
52
+ border: 1px solid transparent;
53
+ }
54
+
55
+ .responsive-tabs__list__item:hover {
56
+ color: #222;
57
+ }
58
+
59
+ .responsive-tabs__list__item--active,
60
+ .responsive-tabs__list__item--active:hover {
61
+ color: #606060;
62
+ background: #fff;
63
+ border: 1px solid #ddd;
64
+ border-bottom-color: #fff;
65
+ border-top-left-radius: 4px;
66
+ border-top-right-radius: 4px;
67
+ }
68
+
69
+ .responsive-tabs__panel {
70
+ background: #fff;
71
+ border: 1px solid #ddd;
72
+ margin-bottom: 20px;
73
+ padding: 20px 20px 0;
74
+ }
75
+
76
+ /* --- ACCORDION --- */
77
+
78
+ @media (max-width: 767px) {
79
+
80
+ .responsive-tabs-wrapper {
81
+ border-top: 1px solid #ddd;
82
+ }
83
+
84
+ .responsive-tabs__heading {
85
+ background: #fff;
86
+ color: #909090;
87
+ padding: 10px 0 10px 20px;
88
+ border: 1px solid #ddd;
89
+ border-top: none;
90
+ font-size: 18px;
91
+ margin: 0;
92
+ position: relative;
93
+ }
94
+
95
+ .responsive-tabs__heading:after {
96
+ content:"";
97
+ display: block;
98
+ position: absolute;
99
+ right: 20px;
100
+ top: 20px;
101
+ width: 0;
102
+ height: 0;
103
+ border-left: 6px solid transparent;
104
+ border-right: 6px solid transparent;
105
+ border-top: 6px solid #444;
106
+ }
107
+
108
+ .responsive-tabs__heading:hover {
109
+ color: #606060;
110
+ }
111
+
112
+ .responsive-tabs__heading--active,
113
+ .responsive-tabs__heading--active:hover {
114
+ background: #e3e3e3;
115
+ color: #606060;
116
+ }
117
+
118
+ .responsive-tabs__heading--active:after {
119
+ border-bottom: 6px solid #404040;
120
+ border-top: 0;
121
+ top: 18px;
122
+ }
123
+
124
+ .responsive-tabs__panel {
125
+ border-top: none;
126
+ margin: 0;
127
+ }
128
+ }
js/responsiveTabs.js DELETED
@@ -1,202 +0,0 @@
1
- /* ----------------
2
- ResponsiveTabs.js
3
- Author: Pete Love | www.petelove.com
4
- Version: 1.5
5
- ------------------- */
6
-
7
- var RESPONSIVEUI = {};
8
-
9
- (function($) {
10
-
11
- RESPONSIVEUI.responsiveTabs = function () {
12
- if (!$('.tabs').hasClass('enabled')) { // if we haven't already enabled tabs
13
- $('.tabs').addClass('enabled'); // used to style tabs if JS is present
14
-
15
- //loop through all sets of tabs on the page
16
- var tablistcount = 1;
17
-
18
- $('.tabs').each(function() {
19
-
20
- var $tabs = $(this);
21
-
22
- // add tab heading and tab panel classes
23
- $tabs.children('h1,h2,h3,h4,h5,h6').addClass('tab-heading');
24
- $tabs.children('div').addClass('tab-panel');
25
-
26
- // determine if markup already identifies the active tab panel for this set of tabs
27
- // if not then set first heading and tab to be the active one
28
- var $activePanel = $tabs.find('.active-panel');
29
- if(!$activePanel.length) {
30
- var $activePanel = $tabs.find('.tab-panel').first().addClass('active-panel');
31
- }
32
-
33
- $tabs.find('.tab-panel').not('.active-panel').hide().attr('aria-hidden','true'); //hide all except active panel
34
- $activePanel.attr('aria-hidden', 'false');
35
- /* make active tab panel hidden for mobile */
36
- $activePanel.addClass('hidden-mobile');
37
-
38
- // wrap tabs in container - to be dynamically resized to help prevent page jump
39
- var $tabsWrapper = $('<div/>', { class: 'tabs-wrapper' });
40
- $tabs.wrap($tabsWrapper);
41
-
42
- var highestHeight = 0;
43
-
44
- // determine height of tallest tab panel. Used later to prevent page jump when tabs are clicked
45
- $tabs.find('.tab-panel').each(function() {
46
- var tabHeight = $(this).height();
47
- if (tabHeight > highestHeight) {
48
- highestHeight = tabHeight;
49
- }
50
- })
51
-
52
- //create the tab list
53
- var $tabList = $('<ul/>', { class: 'tab-list', 'role': 'tablist' });
54
-
55
- //loop through each heading in set
56
- var tabcount = 1;
57
- $tabs.find('.tab-heading').each(function() {
58
-
59
- var $tabHeading = $(this);
60
- var $tabPanel = $(this).next();
61
-
62
- $tabHeading.attr('tabindex', 0);
63
-
64
- // CREATE TAB ITEMS (VISIBLE ON DESKTOP)
65
- //create tab list item from heading
66
- //associate tab list item with tab panel
67
- var $tabListItem = $('<li/>', {
68
- class: 'tab',
69
- id: 'tablist' + tablistcount + '-tab' + tabcount,
70
- 'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
71
- 'role': 'tab',
72
- tabindex: 0,
73
- text: $tabHeading.text(),
74
- keydown: function (objEvent) {
75
- if (objEvent.keyCode == 13) { // if user presses 'enter'
76
- $tabListItem.click();
77
- }
78
- },
79
- click: function() {
80
- //Show associated panel
81
-
82
- //set height of tab container to highest panel height to avoid page jump
83
- $tabsWrapper.css('height', highestHeight);
84
-
85
- // remove hidden mobile class from any other panel as we'll want that panel to be open at mobile size
86
- $tabs.find('.hidden-mobile').removeClass('hidden-mobile');
87
-
88
- // close current panel and remove active state from its (hidden on desktop) heading
89
- $tabs.find('.active-panel').toggle().removeClass('active-panel').attr('aria-hidden','true').prev().removeClass('active-tab-heading');
90
-
91
- //make this tab panel active
92
- $tabPanel.toggle().addClass('active-panel').attr('aria-hidden','false');
93
-
94
- //make the hidden heading active
95
- $tabHeading.addClass('active-tab-heading');
96
-
97
- //remove active state from currently active tab list item
98
- $tabList.find('.active-tab').removeClass('active-tab');
99
-
100
- //make this tab active
101
- $tabListItem.addClass('active-tab');
102
-
103
- //reset height of tab panels to auto
104
- $tabsWrapper.css('height', 'auto');
105
- }
106
- });
107
-
108
- //associate tab panel with tab list item
109
- $tabPanel.attr({
110
- 'role': 'tabpanel',
111
- 'aria-labelledby': $tabListItem.attr('id'),
112
- id: 'tablist' + tablistcount + '-panel' + tabcount
113
- });
114
-
115
- // if this is the active panel then make it the active tab item
116
- if($tabPanel.hasClass('active-panel')) {
117
- $tabListItem.addClass('active-tab');
118
- }
119
-
120
- // add tab item
121
- $tabList.append($tabListItem);
122
-
123
-
124
-
125
-
126
- // TAB HEADINGS (VISIBLE ON MOBILE)
127
- // if user presses 'enter' on tab heading trigger the click event
128
- $tabHeading.keydown(function(objEvent) {
129
- if (objEvent.keyCode == 13) {
130
- $tabHeading.click();
131
- }
132
- })
133
-
134
- //toggle tab panel if click heading (on mobile)
135
- $tabHeading.click(function() {
136
-
137
- // remove any hidden mobile class
138
- $tabs.find('.hidden-mobile').removeClass('hidden-mobile');
139
-
140
- // if this isn't currently active
141
- if (!$tabHeading.hasClass('active-tab-heading')){
142
- //get position of active heading
143
- if($('.active-tab-heading').length) {
144
- var oldActivePos = $('.active-tab-heading').offset().top;
145
- }
146
-
147
- // close currently active panel and remove active state from any hidden heading
148
- $tabs.find('.active-panel').slideToggle().removeClass('active-panel').prev().removeClass('active-tab-heading');
149
-
150
- //close all tabs
151
- $tabs.find('.tab-panel').hide().attr('aria-hidden','true');
152
-
153
- //open this panel
154
- $tabPanel.slideToggle().addClass('active-panel').attr('aria-hidden','false');
155
-
156
- // make this heading active
157
- $tabHeading.addClass('active-tab-heading');
158
-
159
- var $currentActive = $tabs.find('.active-tab');
160
-
161
- //set the active tab list item (for desktop)
162
- $currentActive.removeClass('active-tab');
163
- var panelId = $tabPanel.attr('id');
164
- var tabId = panelId.replace('panel','tab');
165
- $('#' + tabId).addClass('active-tab');
166
-
167
- //scroll to active heading only if it is below previous one
168
- var tabsPos = $('.tabs').offset().top;
169
- var newActivePos = $('.active-tab-heading').offset().top;
170
- if(oldActivePos < newActivePos) {
171
- $('html, body').animate({ scrollTop: tabsPos }, 0).animate({ scrollTop: newActivePos }, 400);
172
- }
173
-
174
- }
175
-
176
- // if this tab panel is already active
177
- else {
178
-
179
- // hide panel but give it special hidden-mobile class so that it can be visible at desktop size
180
- $tabPanel.removeClass('active-panel').slideToggle(function () { $(this).addClass('hidden-mobile') });
181
-
182
- //remove active heading class
183
- $tabHeading.removeClass('active-tab-heading');
184
-
185
- //don't alter classes on tabs as we want it active if put back to desktop size
186
- }
187
-
188
- })
189
-
190
- tabcount ++;
191
-
192
- })
193
-
194
- // add finished tab list to its container
195
- $tabs.prepend($tabList);
196
-
197
- // next set of tabs on page
198
- tablistcount ++;
199
- })
200
- }
201
- }
202
- })(jQuery);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
js/tabby.js ADDED
@@ -0,0 +1,206 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* ----------------
2
+ ResponsiveTabs.js
3
+ Author: Pete Love | www.petelove.com
4
+ Version: 1.10
5
+ ------------------- */
6
+
7
+ var RESPONSIVEUI = {};
8
+
9
+ (function($) {
10
+
11
+ RESPONSIVEUI.responsiveTabs = function () {
12
+ var $tabSets = $('.responsive-tabs');
13
+
14
+ if (!$tabSets.hasClass('responsive-tabs--enabled')) { // if we haven't already called this function and enabled tabs
15
+ $tabSets.addClass('responsive-tabs--enabled');
16
+
17
+ //loop through all sets of tabs on the page
18
+ var tablistcount = 1;
19
+
20
+ $tabSets.each(function() {
21
+
22
+ var $tabs = $(this);
23
+
24
+ // add tab heading and tab panel classes
25
+ $tabs.children(':header').addClass('responsive-tabs__heading');
26
+ $tabs.children('div').addClass('responsive-tabs__panel');
27
+
28
+ // determine if markup already identifies the active tab panel for this set of tabs
29
+ // if not then set first heading and tab to be the active one
30
+ var $activePanel = $tabs.find('.responsive-tabs__panel--active');
31
+ if(!$activePanel.length) {
32
+ $activePanel = $tabs.find('.responsive-tabs__panel').first().addClass('responsive-tabs__panel--active');
33
+ }
34
+
35
+ $tabs.find('.responsive-tabs__panel').not('.responsive-tabs__panel--active').hide().attr('aria-hidden','true'); //hide all except active panel
36
+ $activePanel.attr('aria-hidden', 'false');
37
+ /* make active tab panel hidden for mobile */
38
+ $activePanel.addClass('responsive-tabs__panel--closed-accordion-only');
39
+
40
+ // wrap tabs in container - to be dynamically resized to help prevent page jump
41
+ var $tabsWrapper = $('<div/>', {'class': 'responsive-tabs-wrapper' });
42
+ $tabs.wrap($tabsWrapper);
43
+
44
+ var highestHeight = 0;
45
+
46
+ // determine height of tallest tab panel. Used later to prevent page jump when tabs are clicked
47
+ $tabs.find('.responsive-tabs__panel').each(function() {
48
+ var tabHeight = $(this).height();
49
+ if (tabHeight > highestHeight) {
50
+ highestHeight = tabHeight;
51
+ }
52
+ });
53
+
54
+ //create the tab list
55
+ var $tabList = $('<ul/>', { 'class': 'responsive-tabs__list', 'role': 'tablist' });
56
+
57
+ //loop through each heading in set
58
+ var tabcount = 1;
59
+ $tabs.find('.responsive-tabs__heading').each(function() {
60
+
61
+ var $tabHeading = $(this);
62
+ var $tabPanel = $(this).next();
63
+
64
+ $tabHeading.attr('tabindex', 0);
65
+
66
+ // CREATE TAB ITEMS (VISIBLE ON DESKTOP)
67
+ //create tab list item from heading
68
+ //associate tab list item with tab panel
69
+ var $tabListItem = $('<li/>', {
70
+ 'class': 'responsive-tabs__list__item',
71
+ id: 'tablist' + tablistcount + '-tab' + tabcount,
72
+ 'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
73
+ 'role': 'tab',
74
+ tabindex: 0,
75
+ text: $tabHeading.text(),
76
+ keydown: function (objEvent) {
77
+ if (objEvent.keyCode === 13) { // if user presses 'enter'
78
+ $tabListItem.click();
79
+ }
80
+ },
81
+ click: function() {
82
+ //Show associated panel
83
+
84
+ //set height of tab container to highest panel height to avoid page jump
85
+ $tabsWrapper.css('height', highestHeight);
86
+
87
+ // remove hidden mobile class from any other panel as we'll want that panel to be open at mobile size
88
+ $tabs.find('.responsive-tabs__panel--closed-accordion-only').removeClass('responsive-tabs__panel--closed-accordion-only');
89
+
90
+ // close current panel and remove active state from its (hidden on desktop) heading
91
+ $tabs.find('.responsive-tabs__panel--active').toggle().removeClass('responsive-tabs__panel--active').attr('aria-hidden','true').prev().removeClass('responsive-tabs__heading--active');
92
+
93
+ //make this tab panel active
94
+ $tabPanel.toggle().addClass('responsive-tabs__panel--active').attr('aria-hidden','false');
95
+
96
+ //make the hidden heading active
97
+ $tabHeading.addClass('responsive-tabs__heading--active');
98
+
99
+ //remove active state from currently active tab list item
100
+ $tabList.find('.responsive-tabs__list__item--active').removeClass('responsive-tabs__list__item--active');
101
+
102
+ //make this tab active
103
+ $tabListItem.addClass('responsive-tabs__list__item--active');
104
+
105
+ //reset height of tab panels to auto
106
+ $tabsWrapper.css('height', 'auto');
107
+ }
108
+ });
109
+
110
+ //associate tab panel with tab list item
111
+ $tabPanel.attr({
112
+ 'role': 'tabpanel',
113
+ 'aria-labelledby': $tabListItem.attr('id'),
114
+ id: 'tablist' + tablistcount + '-panel' + tabcount
115
+ });
116
+
117
+ // if this is the active panel then make it the active tab item
118
+ if($tabPanel.hasClass('responsive-tabs__panel--active')) {
119
+ $tabListItem.addClass('responsive-tabs__list__item--active');
120
+ }
121
+
122
+ // add tab item
123
+ $tabList.append($tabListItem);
124
+
125
+
126
+ // TAB HEADINGS (VISIBLE ON MOBILE)
127
+ // if user presses 'enter' on tab heading trigger the click event
128
+ $tabHeading.keydown(function(objEvent) {
129
+ if (objEvent.keyCode === 13) {
130
+ $tabHeading.click();
131
+ }
132
+ });
133
+
134
+ //toggle tab panel if click heading (on mobile)
135
+ $tabHeading.click(function() {
136
+
137
+ // remove any hidden mobile class
138
+ $tabs.find('.responsive-tabs__panel--closed-accordion-only').removeClass('responsive-tabs__panel--closed-accordion-only');
139
+
140
+ // if this isn't currently active
141
+ if (!$tabHeading.hasClass('responsive-tabs__heading--active')){
142
+
143
+ var oldActivePos,
144
+ $activeHeading = $tabs.find('.responsive-tabs__heading--active');
145
+
146
+ // if there is an active heading, get its position
147
+ if($activeHeading.length) {
148
+ oldActivePos = $activeHeading.offset().top;
149
+ }
150
+
151
+ // close currently active panel and remove active state from any hidden heading
152
+ $tabs.find('.responsive-tabs__panel--active').slideToggle().removeClass('responsive-tabs__panel--active').prev().removeClass('responsive-tabs__heading--active');
153
+
154
+ //close all tabs
155
+ $tabs.find('.responsive-tabs__panel').hide().attr('aria-hidden','true');
156
+
157
+ //open this panel
158
+ $tabPanel.slideToggle().addClass('responsive-tabs__panel--active').attr('aria-hidden','false');
159
+
160
+ // make this heading active
161
+ $tabHeading.addClass('responsive-tabs__heading--active');
162
+
163
+ var $currentActive = $tabs.find('.responsive-tabs__list__item--active');
164
+
165
+ //set the active tab list item (for desktop)
166
+ $currentActive.removeClass('responsive-tabs__list__item--active');
167
+ var panelId = $tabPanel.attr('id');
168
+ var tabId = panelId.replace('panel','tab');
169
+ $('#' + tabId).addClass('responsive-tabs__list__item--active');
170
+
171
+ //scroll to active heading only if it is below previous one
172
+ var tabsPos = $tabs.offset().top;
173
+ var newActivePos = ($tabHeading.offset().top) - 15;
174
+ if(oldActivePos < newActivePos) {
175
+ $('html, body').animate({ scrollTop: tabsPos }, 0).animate({ scrollTop: newActivePos }, 400);
176
+ }
177
+
178
+ }
179
+
180
+ // if this tab panel is already active
181
+ else {
182
+
183
+ // hide panel but give it special responsive-tabs__panel--closed-accordion-only class so that it can be visible at desktop size
184
+ $tabPanel.removeClass('responsive-tabs__panel--active').slideToggle(function () { $(this).addClass('responsive-tabs__panel--closed-accordion-only'); });
185
+
186
+ //remove active heading class
187
+ $tabHeading.removeClass('responsive-tabs__heading--active');
188
+
189
+ //don't alter classes on tabs as we want it active if put back to desktop size
190
+ }
191
+
192
+ });
193
+
194
+ tabcount ++;
195
+
196
+ });
197
+
198
+ // add finished tab list to its container
199
+ $tabs.prepend($tabList);
200
+
201
+ // next set of tabs on page
202
+ tablistcount ++;
203
+ });
204
+ }
205
+ };
206
+ })(jQuery);
readme.txt CHANGED
@@ -1,17 +1,17 @@
1
  === Tabby Responsive Tabs ===
2
  Contributors: numeeja
3
  Donate link: http://cubecolour.co.uk/wp
4
- Tags: tabs, responsive,
5
  Requires at least: 3.7
6
- Tested up to: 3.7.1
7
- Stable tag: 1.0.0
8
- License: GPLv2
9
 
10
- Tabby enables you to create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes inside the post editor. The tabs turn into an accordion on a viewport 767px wide or less.
11
 
12
  == Description ==
13
 
14
- * Adds a Horizontal Tabbed interface which changes to Accordion when the viewport width is 767px or less
15
  * Tabs and accordion are created with jQuery
16
  * Supports multiple sets of tabs on same page
17
  * Uses Semantic header and Content markup
@@ -24,56 +24,47 @@ There are two shortcodes which should both be used `[tabby]` and `[tabbyending]`
24
 
25
  `[tabby title="tabname"]`
26
 
27
- Where tabname is the title of your tab.
28
 
29
- Add the tab content after the `[tabby]` shortcode.
30
 
31
- After the content of the last tab in a tabgroup use a `[tabbyending]` shortcode.
32
 
33
- **note:** it is important to have a `[tabbyending]`
34
-
35
  = Example =
36
  `
37
  [tabby title="First Tab"]
38
- Kitty ipsum dolor sit amet, sunbathe dolor mauris a tristique, feed me nullam stuck in a tree ac faucibus bibendum libero. Jump on the table accumsan et vestibulum fluffy fur libero.
39
 
40
  [tabby title="Second Tab"]
41
- Lay down in your way catnip stuck in a tree iaculis, sunbathe orci turpis kittens scratched dolor quis nunc. Vestibulum cras nec attack sniff eat, tempus enim ut adipiscing scratched orci turpis give me fish.
42
 
43
  [tabby title="Third Tab"]
44
- Jump sleep in the sink vestibulum climb the curtains attack, sleep on your face sniff attack your ankles etiam give me fish judging you. Sagittis run zzz jump elit nibh, sunbathe enim rip the couch vulputate accumsan.
45
-
46
  [tabbyending]
47
  `
 
48
 
 
49
 
50
- == Installation ==
51
 
52
- 1. Upload the plugin folder to your '/wp-content/plugins/' directory
53
- 1. Activate the plugin through the 'Plugins' menu in WordPress
54
- 1. Add the shortcodes to your content
55
- `
56
- [tabby title="First Tab"]
57
- Kitty ipsum dolor sit amet, sunbathe dolor mauris a tristique, feed me nullam stuck in a tree ac faucibus bibendum libero. Jump on the table accumsan et vestibulum fluffy fur libero.
58
 
59
- [tabby title="Second Tab"]
60
- Lay down in your way catnip stuck in a tree iaculis, sunbathe orci turpis kittens scratched dolor quis nunc. Vestibulum cras nec attack sniff eat, tempus enim ut adipiscing scratched orci turpis give me fish.
61
 
62
- [tabby title="Third Tab"]
63
- Jump sleep in the sink vestibulum climb the curtains attack, sleep on your face sniff attack your ankles etiam give me fish judging you. Sagittis run zzz jump elit nibh, sunbathe enim rip the couch vulputate accumsan.
64
 
65
- [tabbyending]
66
- `
67
 
68
  == Frequently Asked Questions ==
69
 
70
  = Where is the plugin's admin page? =
71
 
72
- There isn't one. This is a lightweight plugin with no selectable options, so there is no need for an admin page.
73
 
74
  = Is it responsive? =
75
 
76
- Yes - it defaults to 100% of the width of the enclosing element.
77
 
78
  = How can I change the colours? =
79
 
@@ -85,10 +76,41 @@ You can prevent the built-in styles from loading by adding the following line to
85
 
86
  `<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>`
87
 
 
 
 
 
88
  = Can I display multiple tab groups on a single page? =
89
 
90
  Yes you can. As many as you like.
91
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  = Can you create a customised stylesheet for me to fit in with the colours of my website? =
93
 
94
  I'd love to, but my time is limited and this is beyond of the scope of the free support that I can give on the forums, I can offer this as a paid service. Please send me details of your requirements via the [cubecolour contact form](http://cubecolour.co.uk/contact/ "cubecolour contact form").
@@ -97,27 +119,39 @@ I'd love to, but my time is limited and this is beyond of the scope of the free
97
 
98
  I don't, I'm from England.
99
 
100
- = I am using the plugin and I love it, how can I show my appreciation? =
101
 
102
  You can donate via [my donation page](http://cubecolour.co.uk/wp/ "cubecolour donation page")
103
 
104
- If you find the plugin useful I would also appreciate a glowing five star reviews on the [plugin review page](http://wordpress.org/support/view/plugin-reviews/tabby-reponsive-tabs/ "Tabby Responsive Tabs plugin reviews")
 
 
 
 
105
 
106
- If it isn't working for you, please read the documentation carefully. If it doesn't address your issue, post a question on the [plugin support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs" Tabby Responsive Tabs plugin support forum") so we can at least have an opportunity to try to get it working before you leave a review.
107
 
108
  == Screenshots ==
109
 
110
- 1. On a desktop browser the content is displayed within a tabbed interface.
111
- 2. When the browser width is below the size set in the media query, the tabs are replaced by an accordion interface.
112
 
113
  == Changelog ==
114
 
 
 
 
 
115
  = 1.0.0 =
116
 
117
  * Initial Version
118
 
119
  == Upgrade Notice ==
120
 
 
 
 
 
121
  = 1.0.0 =
122
 
123
  * Initial Version
1
  === Tabby Responsive Tabs ===
2
  Contributors: numeeja
3
  Donate link: http://cubecolour.co.uk/wp
4
+ Tags: tabs, responsive, shortcode, tab
5
  Requires at least: 3.7
6
+ Tested up to: 3.8
7
+ Stable tag: 1.0.1
8
+ License: GPLv2 / MIT
9
 
10
+ Tabby enables you to create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes inside the post editor. The tabs transform into an accordion on a viewport 767px wide or less.
11
 
12
  == Description ==
13
 
14
+ * Adds a set of horizontal tabs which changes to an accordion on narrow viewports
15
  * Tabs and accordion are created with jQuery
16
  * Supports multiple sets of tabs on same page
17
  * Uses Semantic header and Content markup
24
 
25
  `[tabby title="tabname"]`
26
 
27
+ replace tabname with the name of your tab.
28
 
29
+ Add the tab content after that.
30
 
31
+ Add a `[tabbyending]` shortcode after the content of the last tab in a tabgroup.
32
 
 
 
33
  = Example =
34
  `
35
  [tabby title="First Tab"]
36
+ Tabby ipsum dolor sit amet, kitty sunbathe dolor, feed me.
37
 
38
  [tabby title="Second Tab"]
39
+ Lay down in your way catnip stuck in a tree, sunbathe kittens.
40
 
41
  [tabby title="Third Tab"]
42
+ sleep in the sink climb the curtains attack, give me fish.
 
43
  [tabbyending]
44
  `
45
+ You can see the tabs on the [demo page](http://cubecolour.co.uk/tabby-responsive-tabs/ "Tabby Responsive Tabs demo").
46
 
47
+ If you want to change the style of the tabs / accordion, copy the contents of the plugin's stylesheet into your child theme, or custom styles plugin and make the changes. This will also enable you to change the dimension used as the responsive breakpoint.
48
 
49
+ If you are using your own custom version of the css, you can prevent the built-in styles from loading by adding the following line to your child theme's functions.php or a custom functionality plugin:
50
 
51
+ `<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>`
 
 
 
 
 
52
 
 
 
53
 
54
+ == Installation ==
 
55
 
56
+ 1. Upload the plugin folder to your '/wp-content/plugins/' directory
57
+ 1. Activate the plugin through the 'Plugins' menu in WordPress
58
 
59
  == Frequently Asked Questions ==
60
 
61
  = Where is the plugin's admin page? =
62
 
63
+ There isn't one. This is a lightweight plugin with no options, so there is no need for an admin page.
64
 
65
  = Is it responsive? =
66
 
67
+ Yes - it should work with responsive themes. It defaults to 100% of the width of the enclosing element.
68
 
69
  = How can I change the colours? =
70
 
76
 
77
  `<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>`
78
 
79
+ = Can I change the responsive breakpoint from the default 767px? =
80
+
81
+ Yes, you'll find where that is set in the css. Refer to the answer above about using custom css.
82
+
83
  = Can I display multiple tab groups on a single page? =
84
 
85
  Yes you can. As many as you like.
86
 
87
+ = My Tabs are displaying too high or low & look odd =
88
+
89
+ This can be due to differences in the metrics of different fonts and the css that is inherited from your theme. You sould be able to overide this with a little additional css in your child theme stylesheet or addded via a custom css plugin.
90
+
91
+ You can increase specificity to ensure that additional css rules are applied.
92
+
93
+ The value to look at here are
94
+
95
+ 1. **margin-bottom** for the **.responsive-tabs__list class**
96
+ 1. **padding-bottom** for the **responsive-tabs__list__item class**
97
+
98
+ eg:
99
+ `
100
+ .responsive-tabs-wrapper .responsive-tabs .responsive-tabs__list {
101
+ margin-bottom: 5px;
102
+
103
+
104
+ }
105
+
106
+ .responsive-tabs-wrapper .responsive-tabs__list__item {
107
+ padding-bottom: 3px;
108
+
109
+ }
110
+ `
111
+
112
+ Changing these values individually will show you how they interact.
113
+
114
  = Can you create a customised stylesheet for me to fit in with the colours of my website? =
115
 
116
  I'd love to, but my time is limited and this is beyond of the scope of the free support that I can give on the forums, I can offer this as a paid service. Please send me details of your requirements via the [cubecolour contact form](http://cubecolour.co.uk/contact/ "cubecolour contact form").
119
 
120
  I don't, I'm from England.
121
 
122
+ = I am using the plugin and love it, how can I show my appreciation? =
123
 
124
  You can donate via [my donation page](http://cubecolour.co.uk/wp/ "cubecolour donation page")
125
 
126
+ If you find the plugin useful I would also appreciate a review on the [plugin review page](http://wordpress.org/support/view/plugin-reviews/tabby-reponsive-tabs/ "Tabby Responsive Tabs plugin reviews")
127
+
128
+ If the isn't working for you, please read the documentation to check whether your issue is answered already. If your issue is not addressed here, please post a question on the [plugin support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum") so we have an opportunity to try to get it working before you leave a review.
129
+
130
+ == Other Notes ==
131
 
132
+ The plugin is licenced under [GNU GPLv2](http://opensource.org/licenses/GPL-2.0 "GNU GPLv2"), however as the original responsive tabs script was [hosted at codepen as a public pen](http://blog.codepen.io/legal/licensing/ "hosted at codepen as a public pen"), the GPL compatible [MIT license](http://opensource.org/licenses/MIT "MIT license") applies to that component.
133
 
134
  == Screenshots ==
135
 
136
+ 1. On a desktop browser the content is displayed within tabs.
137
+ 1. When the browser width is below the size set in the media query, the tabs are replaced by an accordion.
138
 
139
  == Changelog ==
140
 
141
+ = 1.0.1 =
142
+
143
+ * Updated js & css
144
+
145
  = 1.0.0 =
146
 
147
  * Initial Version
148
 
149
  == Upgrade Notice ==
150
 
151
+ = 1.0.1 =
152
+
153
+ * Updated js & css
154
+
155
  = 1.0.0 =
156
 
157
  * Initial Version
tabby-responsive-tabs.php CHANGED
@@ -4,11 +4,10 @@ Plugin Name: Tabby Responsive Tabs
4
  Plugin URI: http://cubecolour.co.uk/tabby-responsive-tabs
5
  Description: Create responsive tabs inside your posts, pages or post types by adding simple shortcodes inside the post editor. The tabs behave like an accordion on smaller screens.
6
  Author: cubecolour
7
- Version: 1.0.0
8
  Author URI: http://cubecolour.co.uk
9
 
10
- Tabby Responsive Tabs
11
- WordPress plugin Copyright 2013 Michael Atkins
12
 
13
  Licenced under the GNU GPL:
14
 
@@ -27,7 +26,7 @@ Author URI: http://cubecolour.co.uk
27
  Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
28
 
29
 
30
- Responsive Tabs jQuery script by Pete Love:
31
  http://www.petelove.co.uk/responsiveTabs/
32
  http://codepen.io/petelove666/pen/zbLna
33
  MIT license: http://blog.codepen.io/legal/licensing/
@@ -76,12 +75,15 @@ function cc_tabby_meta_links( $links, $file ) {
76
  // and stop the default styles from loading by this by adding the following line to the theme's functions.php:
77
  //
78
  // remove_action('wp_print_styles', 'cc_tabby_css', 30);
 
 
 
79
  // ==============================================
80
 
81
  add_action('wp_print_styles', 'cc_tabby_css', 30);
82
 
83
  function cc_tabby_css() {
84
- wp_enqueue_style('tabby.css', plugin_dir_url(__FILE__).'css/' . 'responsive-tabs.css' , false, '1.0');
85
  }
86
 
87
  // ==============================================
@@ -90,7 +92,7 @@ function cc_tabby_css() {
90
 
91
  add_action('wp_enqueue_scripts', 'cc_tabby_js');
92
  function cc_tabby_js() {
93
- wp_register_script( 'tabby', plugins_url() . "/" . basename(dirname(__FILE__)) . '/js/responsiveTabs.js', array('jquery'), '1.0.0', true );
94
  wp_enqueue_script( 'tabby' );
95
  }
96
 
@@ -104,6 +106,7 @@ function cc_tabbytrigger() {
104
 
105
  if ($tabbytriggered == FALSE) {
106
  echo "\n" . "<script>jQuery(document).ready(function($) { RESPONSIVEUI.responsiveTabs(); })</script>" . "\n";
 
107
  $tabbytriggered = TRUE;
108
  }
109
  }
@@ -131,15 +134,15 @@ if ($GLOBALS["reset_firsttab_flag"] == TRUE) {
131
  // test whether this is the first tab in the group
132
  if ( $firsttab == TRUE) {
133
 
134
- // Set flag so we know the next tab is not the first in the tab group
135
  $firsttab = FALSE;
136
  // Build output for the first tab
137
- return '<div class="tabs"><h2 class="tabtitle">' . $title . '</h2><div><p>';
138
  }
139
 
140
  else {
141
  // Build output for non-first tab(s)
142
- return '</p></div><h2 class="tabtitle">' . $title . '</h2><div><p>';
143
  }
144
  }
145
 
@@ -147,7 +150,7 @@ add_shortcode('tabby', 'cc_shortcode_tabby');
147
 
148
  // ==============================================
149
  // SHORTCODE TO GO AFTER FINAL TABBY TAB
150
- // use [endtabby]
151
  // ==============================================
152
  function cc_shortcode_tabbyending( $atts, $content = null ) {
153
 
4
  Plugin URI: http://cubecolour.co.uk/tabby-responsive-tabs
5
  Description: Create responsive tabs inside your posts, pages or post types by adding simple shortcodes inside the post editor. The tabs behave like an accordion on smaller screens.
6
  Author: cubecolour
7
+ Version: 1.0.1
8
  Author URI: http://cubecolour.co.uk
9
 
10
+ Tabby Responsive Tabs WordPress plugin Copyright 2013 Michael Atkins
 
11
 
12
  Licenced under the GNU GPL:
13
 
26
  Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
27
 
28
 
29
+ Original version of Responsive Tabs jQuery script by Pete Love:
30
  http://www.petelove.co.uk/responsiveTabs/
31
  http://codepen.io/petelove666/pen/zbLna
32
  MIT license: http://blog.codepen.io/legal/licensing/
75
  // and stop the default styles from loading by this by adding the following line to the theme's functions.php:
76
  //
77
  // remove_action('wp_print_styles', 'cc_tabby_css', 30);
78
+ //
79
+ // to do: Possibly split into two css files - one mandatory & one replaceable
80
+ // or one with defaults & info on what/how to override
81
  // ==============================================
82
 
83
  add_action('wp_print_styles', 'cc_tabby_css', 30);
84
 
85
  function cc_tabby_css() {
86
+ wp_enqueue_style('tabby.css', plugin_dir_url(__FILE__).'css/' . 'tabby.css' , false, '1.0.1');
87
  }
88
 
89
  // ==============================================
92
 
93
  add_action('wp_enqueue_scripts', 'cc_tabby_js');
94
  function cc_tabby_js() {
95
+ wp_register_script( 'tabby', plugins_url() . "/" . basename(dirname(__FILE__)) . '/js/tabby.js', array('jquery'), '1.0.1', true );
96
  wp_enqueue_script( 'tabby' );
97
  }
98
 
106
 
107
  if ($tabbytriggered == FALSE) {
108
  echo "\n" . "<script>jQuery(document).ready(function($) { RESPONSIVEUI.responsiveTabs(); })</script>" . "\n";
109
+
110
  $tabbytriggered = TRUE;
111
  }
112
  }
134
  // test whether this is the first tab in the group
135
  if ( $firsttab == TRUE) {
136
 
137
+ // Set flag so we know subsequent tabs are not the first in the tab group
138
  $firsttab = FALSE;
139
  // Build output for the first tab
140
+ return '<div class="responsive-tabs"><h2 class="tabtitle">' . $title . '</h2><div class="tabcontent"><p>';
141
  }
142
 
143
  else {
144
  // Build output for non-first tab(s)
145
+ return '</p></div><h2 class="tabtitle">' . $title . '</h2><div class="tabcontent"><p>';
146
  }
147
  }
148
 
150
 
151
  // ==============================================
152
  // SHORTCODE TO GO AFTER FINAL TABBY TAB
153
+ // use [tabbyending]
154
  // ==============================================
155
  function cc_shortcode_tabbyending( $atts, $content = null ) {
156