Tabby Responsive Tabs - Version 1.1.1

Version Description

Improvements to default CSS
Addition of 'open' shortcode attribute to allow tabs other than the first to be open when the page loads
First tab now is open by default when displayed as accordion
Changed links in plugin table
Get Plugin Version function
Prevent tabs overlapping if there are too many
Remove hard coded paragraph tags in tab content & improve
Added icon font support (Font Awesome needs to be loaded by your theme or another plugin)
Added functionality to allow target url parameter to control which tab is open on page load.

Release Info

Developer	numeeja
Plugin	Tabby Responsive Tabs
Version	1.1.1
Comparing to
See all releases

Code changes from version 1.0.3 to 1.1.1

Files changed (4) hide show

css/tabby.css +99 -43
js/tabby.js +21 -11
readme.txt +119 -46
tabby-responsive-tabs.php +95 -35

css/tabby.css CHANGED Viewed

	@@ -1,24 +1,28 @@


1	.responsive-tabs .responsive-tabs__heading {
2	display: none;
3	}
4
5	.responsive-tabs .responsive-tabs__list__item {
6	display: inline;
7	- cursor:pointer;
8	}
9
10	- .responsive-tabs-wrapper {
11	clear: both;
12	- margin-bottom: 20px;
13	- zoom: 1;
14	}

15	.responsive-tabs-wrapper:before,
16	.responsive-tabs-wrapper:after {
17	- content: "";
18	- display: table;
19	- }

20	.responsive-tabs-wrapper:after {
21	- clear: both;
22	}
23
24	.responsive-tabs .responsive-tabs__heading:focus,
	@@ -31,39 +35,79 @@
31	outline: none;
32	}
33
34	- .responsive-tabs .responsive-tabs__list {
35	font-size: 18px;
36	line-height: 18px;
37	- margin: 20px 0 ~~10px~~ 0;
38	- padding~~-bottom~~:0;
39	}
40
41	.responsive-tabs .responsive-tabs__list__item {

42	border: 1px solid transparent;
43	border-bottom: none;
44	- ~~line~~-~~height~~: 1;
45	- ~~margin~~: ~~0 14px 0 0~~;
46	- ~~padding~~: ~~10px 20px~~;















47	}
48	-





49	.responsive-tabs .responsive-tabs__list__item:hover {
50	- color: #~~222~~;

51	}
52
53	.responsive-tabs .responsive-tabs__list__item--active,
54	.responsive-tabs .responsive-tabs__list__item--active:hover {
55	background: #fff;
56	border-color: #ddd;
57	- ~~border-top-left-radius~~: ~~4px~~;
58	- ~~border~~-~~top-right-radius~~: ~~4px~~;
59	- ~~color~~: ~~#606060~~;


60	}
61
62	.responsive-tabs .responsive-tabs__panel {
63	background: #fff;
64	border: 1px solid #ddd;
65	- ~~margin~~-~~bottom~~: ~~20px~~;








66	padding: 20px 20px 0;








67	}
68
69	@media (min-width: 768px) {
	@@ -73,8 +117,6 @@
73	}
74	}
75
76	- /* --- ACCORDION --- */
77	-
78	@media (max-width: 767px) {
79
80	.responsive-tabs .responsive-tabs__list {
	@@ -82,36 +124,37 @@
82	}
83
84	.responsive-tabs .responsive-tabs__heading {
85	- display: block; ~~cursor: pointer;~~
86	- }
87	-
88	- .responsive-tabs .responsive-tabs__panel--closed-accordion-only {
89	- display: none;
90	}
91	- }
92	-
93	- @media (max-width: 767px) {
94
95	- .responsive-tabs-wrapper {
96	- border-top: 1px solid #~~ddd~~;
97	}
98
99	.responsive-tabs .responsive-tabs__heading {
100	background: #fff;
101	- border: 1px solid #~~ddd~~;
102	border-top: none;
103	- color: #~~909090~~;
104	font-size: 18px;
105	font-weight: normal;
106	- ~~padding~~: ~~10px 0 10px 20px~~;
107	margin: 0;


108	position: relative;
109	}
110	-





111	.responsive-tabs .responsive-tabs__heading:after {
112	border-left: 6px solid transparent;
113	border-right: 6px solid transparent;
114	- border-top: 6px solid #~~444~~;
115	content:"";
116	display: block;
117	position: absolute;
	@@ -122,23 +165,36 @@
122	}
123
124	.responsive-tabs .responsive-tabs__heading:hover {
125	- ~~color~~: #~~606060~~;

126	}
127	-




128	.responsive-tabs .responsive-tabs__heading--active,
129	.responsive-tabs .responsive-tabs__heading--active:hover {
130	- background: #~~e3e3e3~~;
131	- color: #~~606060~~;
132	}
133
134	- .responsive-tabs .responsive-tabs__heading--active:after {
135	- ~~border~~-~~bottom~~: ~~6px solid #404040;~~

136	border-top: 0;
137	top: 18px;
138	}
139
140	.responsive-tabs .responsive-tabs__panel {





141	border-top: none;
142	margin: 0;


143	}
144	}


1	+ /* ------ wordpress.org/plugins/tabby-responsive-tabs/ ------ */
2	+
3	.responsive-tabs .responsive-tabs__heading {
4	display: none;
5	}
6
7	.responsive-tabs .responsive-tabs__list__item {
8	display: inline;
9	+ cursor: pointer;
10	}
11
12	+ .responsive-tabs-wrapper {
13	clear: both;
14	+ margin-bottom: 20px;
15	+ zoom: 1;
16	}
17	+
18	.responsive-tabs-wrapper:before,
19	.responsive-tabs-wrapper:after {
20	+ content: "";
21	+ display: table;
22	+ }
23	+
24	.responsive-tabs-wrapper:after {
25	+ clear: both;
26	}
27
28	.responsive-tabs .responsive-tabs__heading:focus,

35	outline: none;
36	}
37
38	+ .responsive-tabs ul.responsive-tabs__list {
39	font-size: 18px;
40	line-height: 18px;
41	+ margin: 20px 0 0 12px;
42	+ padding: 0;
43	}
44
45	.responsive-tabs .responsive-tabs__list__item {
46	+ background: transparent;
47	border: 1px solid transparent;
48	border-bottom: none;
49	+ -webkit-border-top-left-radius: 3px;
50	+ -webkit-border-top-right-radius: 3px;
51	+ -moz-border-radius-topleft: 3px;
52	+ -moz-border-radius-topright: 3px;
53	+ border-top-left-radius: 3px;
54	+ border-top-right-radius: 3px;
55	+ color: #999;
56	+ font-size: 18px;
57	+ line-height: 19px;
58	+ text-transform: inherit;
59	+ margin: 1px 12px 0 0;
60	+ padding: 10px 12px 10px;
61	+ white-space: nowrap;
62	+ float: left;
63	+ -webkit-user-select: none;
64	+ -moz-user-select: none;
65	+ -ms-user-select: none;
66	+ user-select: none;
67	}
68	+
69	+ .responsive-tabs .responsive-tabs__list__item .fa {
70	+ margin-right: 8px;
71	+ line-height: 0.8;
72	+ }
73	+
74	.responsive-tabs .responsive-tabs__list__item:hover {
75	+ color: #333;
76	+ background: transparent;
77	}
78
79	.responsive-tabs .responsive-tabs__list__item--active,
80	.responsive-tabs .responsive-tabs__list__item--active:hover {
81	background: #fff;
82	border-color: #ddd;
83	+ color: #666;
84	+ padding-bottom: 11px;
85	+ margin-top: 0;
86	+ position: relative;
87	+ top: 1px;
88	}
89
90	.responsive-tabs .responsive-tabs__panel {
91	background: #fff;
92	border: 1px solid #ddd;
93	+ border-top: 1px solid #ddd;
94	+ -webkit-border-radius: 0px;
95	+ -moz-border-radius: 0px;
96	+ border-radius: 0px;
97	+ -webkit-border-top-left-radius: 0px;
98	+ -moz-border-radius-topleft: 0px;
99	+ border-top-left-radius: 0px;
100	+ clear: left;
101	+ margin-bottom: 0;
102	padding: 20px 20px 0;
103	+ word-wrap: break-word;
104	+ }
105	+
106	+ .responsive-tabs .responsive-tabs__panel:after {
107	+ content: "";
108	+ display: block;
109	+ height: 0;
110	+ clear: both;
111	}
112
113	@media (min-width: 768px) {

117	}
118	}
119


120	@media (max-width: 767px) {
121
122	.responsive-tabs .responsive-tabs__list {

124	}
125
126	.responsive-tabs .responsive-tabs__heading {
127	+ display: block;
128	+ cursor: pointer;



129	}



130
131	+ .responsive-tabs-wrapper {
132	+ border-top: 1px solid #ccc;
133	}
134
135	.responsive-tabs .responsive-tabs__heading {
136	background: #fff;
137	+ border: 1px solid #ccc;
138	border-top: none;
139	+ color: #777;
140	font-size: 18px;
141	font-weight: normal;
142	+ text-transform: inherit;
143	margin: 0;
144	+ padding: 10px 0;
145	+ padding-left: 20px;
146	position: relative;
147	}
148	+
149	+ .responsive-tabs .responsive-tabs__heading .fa {
150	+ margin-right: 8px;
151	+ display:none;
152	+ }
153	+
154	.responsive-tabs .responsive-tabs__heading:after {
155	border-left: 6px solid transparent;
156	border-right: 6px solid transparent;
157	+ border-top: 6px solid #777;
158	content:"";
159	display: block;
160	position: absolute;

165	}
166
167	.responsive-tabs .responsive-tabs__heading:hover {
168	+ background: #eee;
169	+ color: #777;
170	}
171	+
172	+ .responsive-tabs .responsive-tabs__heading:hover:after {
173	+ border-top: 6px solid #777;
174	+ }
175	+
176	.responsive-tabs .responsive-tabs__heading--active,
177	.responsive-tabs .responsive-tabs__heading--active:hover {
178	+ background: #ccc;
179	+ color: #fff;
180	}
181
182	+ .responsive-tabs .responsive-tabs__heading--active:after,
183	+ .responsive-tabs .responsive-tabs__heading--active:hover:after {
184	+ border-bottom: 6px solid #fff;
185	border-top: 0;
186	top: 18px;
187	}
188
189	.responsive-tabs .responsive-tabs__panel {
190	+ background: #fff;
191	+ border: 1px solid #ccc;
192	+ -webkit-border-radius: 0;
193	+ -moz-border-radius: 0;
194	+ border-radius: 0;
195	border-top: none;
196	margin: 0;
197	+ padding: 0 20px;
198	+ padding-top: 20px;
199	}
200	}

js/tabby.js CHANGED Viewed

	@@ -1,13 +1,14 @@
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
	@@ -32,10 +33,16 @@ var RESPONSIVEUI = {};
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' });
	@@ -68,17 +75,18 @@ var RESPONSIVEUI = {};
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
	@@ -104,6 +112,7 @@ var RESPONSIVEUI = {};
104
105	//reset height of tab panels to auto
106	$tabsWrapper.css('height', 'auto');

107	}
108	});
109
	@@ -133,7 +142,7 @@ var RESPONSIVEUI = {};
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
	@@ -172,9 +181,9 @@ var RESPONSIVEUI = {};
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
	@@ -192,15 +201,16 @@ var RESPONSIVEUI = {};
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);


1	/* ----------------
2	+ Tabby.js 1.1.0
3	+
4	+ based on ResponsiveTabs.js 1.10
5	+ by Pete Love
6	------------------- */
7
8	var RESPONSIVEUI = {};
9
10	(function($) {
11	+
12	RESPONSIVEUI.responsiveTabs = function () {
13	var $tabSets = $('.responsive-tabs');
14

33	$activePanel = $tabs.find('.responsive-tabs__panel').first().addClass('responsive-tabs__panel--active');
34	}
35
36	+ /* Add active class to the active header of the panel (FOR MOBILE) */
37	+ $activeHeader = $activePanel.prev();
38	+ if($activeHeader !== null) {
39	+ $activeHeader.addClass("responsive-tabs__heading--active");
40	+ }
41	+
42	$tabs.find('.responsive-tabs__panel').not('.responsive-tabs__panel--active').hide().attr('aria-hidden','true'); //hide all except active panel
43	$activePanel.attr('aria-hidden', 'false');
44	+ /* make active tab panel hidden for mobile *
45	+ $activePanel.addClass('responsive-tabs__panel--closed-accordion-only');*/
46
47	// wrap tabs in container - to be dynamically resized to help prevent page jump
48	var $tabsWrapper = $('<div/>', {'class': 'responsive-tabs-wrapper' });

75	//associate tab list item with tab panel
76	var $tabListItem = $('<li/>', {
77	'class': 'responsive-tabs__list__item',
78	+ html: $tabHeading.html(),
79	id: 'tablist' + tablistcount + '-tab' + tabcount,
80	'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
81	'role': 'tab',
82	tabindex: 0,

83	keydown: function (objEvent) {
84	if (objEvent.keyCode === 13) { // if user presses 'enter'
85	$tabListItem.click();
86	}
87	},
88	click: function() {
89	+
90	//Show associated panel
91
92	//set height of tab container to highest panel height to avoid page jump

112
113	//reset height of tab panels to auto
114	$tabsWrapper.css('height', 'auto');
115	+
116	}
117	});
118

142
143	//toggle tab panel if click heading (on mobile)
144	$tabHeading.click(function() {
145	+
146	// remove any hidden mobile class
147	$tabs.find('.responsive-tabs__panel--closed-accordion-only').removeClass('responsive-tabs__panel--closed-accordion-only');
148

181	var tabsPos = $tabs.offset().top;
182	var newActivePos = ($tabHeading.offset().top) - 15;
183	if(oldActivePos < newActivePos) {
184	+ $('html, body').animate({ scrollTop: tabsPos }, 0).animate({ scrollTop: newActivePos }, 550);
185	}
186	+
187	}
188
189	// if this tab panel is already active

201	});
202
203	tabcount ++;

204	});
205
206	// add finished tab list to its container
207	$tabs.prepend($tabList);
208	+
209
210	// next set of tabs on page
211	tablistcount ++;
212	});
213	}
214	};
215	+
216	})(jQuery);

readme.txt CHANGED Viewed

	@@ -3,11 +3,11 @@ 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.3~~
7	- Stable tag: 1.0.3
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
	@@ -18,38 +18,76 @@ Tabby enables you to create responsive tabs inside your posts, pages or custom p
18	* Aria attributes and roles aid screen reader accessibility
19	* Tabs and content are accessible via keyboard
20


21	= Usage: =
22
23	There are two shortcodes which should both be used `[tabby]` and `[tabbyending]`
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
	@@ -58,66 +96,74 @@ If you are using your own custom version of the css, you can prevent the built-i
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
71	- ~~You~~ ~~can~~ ~~copy~~ ~~the~~ ~~css~~ ~~rules~~ ~~from~~ the ~~plugin's~~ ~~stylesheet~~ ~~into~~ your ~~child~~ ~~theme's~~ ~~stylesheet~~ ~~and~~ ~~then~~ ~~customise~~ the ~~colours~~ or ~~use~~ a plugin to ~~add~~ in ~~the~~ ~~css~~. ~~The~~ ~~css~~ ~~rules~~ ~~should~~ be ~~straighforward~~ to ~~work~~ ~~out~~.
72
73	- = OK ~~I've~~ ~~done that, now how do I stop~~ the ~~default~~ ~~styles~~ ~~from loading~~? =
74
75	- ~~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:
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	- = I~~'ve~~ ~~just~~ ~~updated~~ to ~~version~~ ~~1.0.2~~ ~~and~~ ~~the~~ ~~tabs~~ ~~are~~ ~~now~~ ~~displaying~~ ~~incorrectly~~ =
115
116	- ~~The~~ ~~CSS~~ ~~has~~ ~~changed~~ in ~~version~~ ~~1.0.2.~~ It is ~~possible that you added css rules to your theme~~'s ~~stylesheet~~ ~~rather~~ ~~than~~ ~~following~~ the ~~recommended method for using a customised version of the css~~.




117
118	= Can you create a customised stylesheet for me to fit in with the colours of my website? =
119
120	- ~~I'd~~ ~~love to, but my time is limited and~~ this is beyond of the scope of the free support ~~that~~ I can provide. I can ~~however~~ ~~offer~~ ~~this~~ as ~~paid~~ ~~consultancy. Please send me details of~~ your ~~requirements~~ ~~via~~ the [~~cubecolour~~ ~~contact~~ ~~form~~](http://cubecolour.co.uk/contact/ "cubecolour contact form") for a quote. Please do not use that form for requests for free support. Plugin support is provided at the [plugin's support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs ~~plugin support forum~~") on ~~WordPress~~.~~org.~~


121
122	= Why do you spell the word 'color' incorrectly? =
123
	@@ -125,13 +171,21 @@ I don't, I'm from England and 'colour' is the correct spelling.
125
126	= I am using the plugin and love it, how can I show my appreciation? =
127
128	- You can donate via [my donation page](http://cubecolour.co.uk/wp/ "cubecolour donation page")






129
130	- 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")~~
131
132	- = It ~~doesn't~~ ~~work~~ =
133
134	- If ~~the~~ ~~plugin~~ ~~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.~~


135
136	== Other Notes ==
137
	@@ -140,10 +194,22 @@ The plugin is licenced under [GNU GPLv2](http://opensource.org/licenses/GPL-2.0
140	== Screenshots ==
141
142	1. On a desktop browser the content is displayed within tabs.
143	- 1. When the browser width is below the size set in the media query, the tabs are replaced by an accordion.
144
145	== Changelog ==
146












147	= 1.0.3 =
148
149	* improved theme compatibility with default css
	@@ -163,13 +229,20 @@ The plugin is licenced under [GNU GPLv2](http://opensource.org/licenses/GPL-2.0
163
164	== Upgrade Notice ==
165







166	= 1.0.3 =
167
168	* improved theme compatibility with default css
169
170	= 1.0.2 =
171
172	- * ~~better~~ efficiency - enqueue plugin js only when needed
173	* improved theme compatibility with default css
174
175	= 1.0.1 =


3	Donate link: http://cubecolour.co.uk/wp
4	Tags: tabs, responsive, shortcode, tab
5	Requires at least: 3.7
6	+ Tested up to: 4.0
7	+ Stable tag: 1.1.1
8	License: GPLv2 / MIT
9
10	+ Enables you to create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes inside the post editor.
11
12	== Description ==
13

18	* Aria attributes and roles aid screen reader accessibility
19	* Tabs and content are accessible via keyboard
20
21	+ > For the easiest way to customise the display of your tabs, you can now use the [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on from cubecolour. This adds a settings panel for customising your tabs without editing any code. You can use the default tabby styles or one of the one-click style presets as a starting point for customisation. The add-on also enables you to load the files required to add icons to your tab titles.
22	+
23	= Usage: =
24
25	There are two shortcodes which should both be used `[tabby]` and `[tabbyending]`
26
27	`[tabby title="tabname"]`
28
29	+ replace tabname with the name of your tab.
30
31	+ Add the tab content after that. It is recommended to leave a blank line before and after each tabby shortcode.
32
33	Add a `[tabbyending]` shortcode after the content of the last tab in a tabgroup.
34
35	= Example =
36	`
37	[tabby title="First Tab"]
38	+
39	Tabby ipsum dolor sit amet, kitty sunbathe dolor, feed me.
40
41	[tabby title="Second Tab"]
42	+
43	Lay down in your way catnip stuck in a tree, sunbathe kittens.
44
45	[tabby title="Third Tab"]
46	+
47	sleep in the sink climb the curtains attack, give me fish.
48	[tabbyending]
49	`
50	You can see the tabs on the [demo page](http://cubecolour.co.uk/tabby-responsive-tabs/ "Tabby Responsive Tabs demo").
51
52	+ If you want to change how the tabs and accordion display on your site, you have two options:
53
54	+ 1. Use the [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin which provides a very easy way to customise the display of your tabs without needing to edit any code.
55
56	+ 2. Copy the contents of the plugin's stylesheet into your child theme or custom styles plugin and make the changes to the copy as required. If you do this you will also need to prevent the built-in styles from loading by adding the following line to your child theme's functions.php or a custom functionality plugin: `<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>`
57	+
58	+ = Additional Shortcode attributes =
59	+
60	+ Open
61	+
62	+ The first (leftmost) tab panel will be open by default in 'tab view' and in 'accordion view'.
63	+
64	+ If you want a specific tab other than the first tab to be open by default when the page first loads, you can add the parameter & value open="yes" to the shortcode for that tab:
65	+
66	+ `
67	+ [tabby title="My Tab" open="yes"]
68	+ `
69	+ Icon
70
71	+ The markup required to show an icon alongside a tab title can be added by using the 'icon' attribute. Tabby responsive tabs does not add the icons files, you will also need to use a theme or plugin (such as the tabby responsive tabs customiser add-on) to add the icon files:
72	+ `
73	+ [tabby title="My Tab" icon="cog"]
74	+ `
75	+ This adds a pseudo element before the tab table with the classes "fa" and "fa-cog". Other icon font sets can be used if you ensure the CSS rules target the classes added by the plugin.
76	+
77	+ The [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin can be used to add the required Font Awesome files for you.
78	+
79	+
80	+ = Controlling which tab is open when linking to the page =
81	+ You can use a 'target' URL parameter to set which tab will be open. The value of this parameter is based on tab title specified in the tabby shortcode with punctuation & special characters removed and with spaces replaced by dashes.
82	+
83	+ If you want to link to a 'contacts' page with a tab titled 'Phone Numbers' open, the url you use to link to this page would look like:
84	+ `
85	+ yoursite.com/contact/?target=phone-numbers
86	+ `
87	+ If you want a tab with the title 'email addresses' to be open, the url would look like:
88	+ `
89	+ yoursite.com/contact/?target=email-addresses
90	+ `
91
92	== Installation ==
93

96
97	== Frequently Asked Questions ==
98
99	+ = Why isn't it working for me? =
100
101	+ There are a few things you can investigate when troubleshooting a plugin which is not working as expected:
102
103	+ Incorrectly formed shortcodes
104	+ If you copied & pasted in the shortcodes from a web page rather than directly typing them into the page, it is possible that there may be invisible characters in the shortcode text. Correct this by deleting the shortcodes and type them directly instead.
105
106	+ Plugin or theme conflicts
107	+ To troubleshoot whether you have a plugin or theme conflicting with he plugin, switch to a default theme such as Twenty-Thirteen. If the plugin starts working correctly at that point, you know that the theme is at fault.
108
109	+ If changing the theme makes no difference, deactivate all other plugins. If Tabby Responsive Tabs starts working correctly at that point, discover which plugin caused the issue by reactivating the plugins one by one until tabby responsive tabs stops working again.
110
111	+ If the plugin isn't working for you, please read the documentation to check whether your issue is covered. Then review the topics in the [plugin support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum"). You may find an appropriate solution outlined in a resolved topic. If you do not find an answer that enables you to solve your issue, please post a new topic on the forum so we have an opportunity to get it working before you consider leaving a review.
112
113	+ = Where is the plugin's admin page? =
114
115	+ There isn't one. This is a lightweight plugin with no options. If you want to be able to configure your tabs using an admin page, the [Tabby Responsive Tabs Customiser plugin](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin") is available.
116
117	+ = Does it work with responsive Themes? =
118
119	+ Yes - it should work with any well-coded responsive theme.
120
121	+ = Does it work with non-responsive Themes? =
122
123	+ The plugin should also work with non-responsive Themes, however this is not really recommended; if you are using a non-responsive theme the tabs will not switch to an accordion display on a mobile device.
124	+
125	+ = How can I change the colours? =
126
127	+ The recommended method for experienced developers to customise how the tabs display is to copy the css rules from the plugin's stylesheet into the child theme's stylesheet and then customise the colours and other CSS as required. When using customised version of the plugin's styles in the child theme, you should also prevent the plugin's default built-in styles from loading by adding the following line to the child theme's functions.php (or a custom functionality plugin):
128	+ `<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>`
129
130	+ If you prefer to use a settings page in your WordPress admin to set a custom tab style, you can use the [Tabby Responsive Tabs Customiser plugin](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin") which contains several tab style presets which can be further customised with a comprehensive set of easy to set options. The cusomiser plugin was designed to be easy for non-developers to use to customise how the tabs display.
131
132	+ = Can I change the responsive breakpoint from the default 767px? =
133
134	+ Yes, you'll find where that is set in the CSS. Refer to the answer above about using custom css.
135
136	+ This value can also be set using the Tabby Responsive Tabs Customiser plugin's admin panel.
137
138	+ = Why Doesn't my slider work in any tab except the first one? =

139
140	+ Some carousels/sliders plugins render their content with zero height & width if the tab containing the content is not visible on page load. If you need to place a slider in a tab, I would suggest trying Meteor Slides as it seems to work reliably in my tests.



141
142	+ = Why Doesn't my Google Map work in any tab except the first one? =
143
144	+ Some google maps plugins also render their content with zero height & width if the tab containing the content is not visible on page load. I would welcome any suggestions for a workaround that might help with this.
145
146	+ = Can I display multiple tab groups on a single page? =

147
148	+ Yes you can have as many sets of tabs as you like.
149	+
150	+ = Can I specify which tab is open when the page initially loads? =
151
152	+ Yes, see the documentation for the 'open' shortcode parameter for details.
153
154	+ = Can I specify which tab is open from a link pointing to the page =
155
156	+ Yes, see the documentation for the usage of a 'target' URL parameter in the link.
157	+
158	+ = I've just updated the plugin and the tabs are now displaying differently =
159	+
160	+ The default CSS has changed in version 1.0.2 and version 1.1.0. If your tabs now appear 'broken' after an update, this may be due to your site using customised tab styles added to your theme instead of following the recommended method of replacing the default CSS with a complete customised version. To fix this remove the CSS rules you added to your theme to target the tabs and add the custom styles using the method outlined in the documentation.
161
162	= Can you create a customised stylesheet for me to fit in with the colours of my website? =
163
164	+ Unfortunately this is beyond of the scope of the free support I can provide. You can style your tabs to match your theme using the optional [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on plugin.
165	+
166	+ Plugin support for Tabby Responsive Tabs is provided at the [plugin's support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum") on WordPress.org.
167
168	= Why do you spell the word 'color' incorrectly? =
169

171
172	= I am using the plugin and love it, how can I show my appreciation? =
173
174	+ You can donate any amount via [my donation page](http://cubecolour.co.uk/wp/ "cubecolour donation page") or you could purchase a copy of the [Tabby Responsive Tabs Customiser plugin](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin").
175	+
176	+ If you find Tabby Responsive Tabs useful, I would also appreciate a review on the [plugin review page](http://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin reviews")
177	+
178	+ = Is the Tabby Responsive Tabs Customiser a Premium or Pro Version of Tabby Responsive Tabs? =
179	+
180	+ No, Tabby Responsive Tabs works great on its own and customising how the tabs display should be straightforward for anyone comfortable with editing a child theme. The Tabby Responsive Tabs Customiser plugin is an add-on which is designed to be useful for anyone who wants an easy way to customise how their tabs display without touching any code.
181
182	+ = Why is the Tabby Responsive Tabs Customiser an add-on plugin rather than part of Tabby Responsive Tabs? =
183
184	+ The free Tabby Responsive Tabs plugin was designed as a lightweight plugin for WordPress developers to add responsive tabs to their WordPress site. The functionality provided by the optional add-on customiser plugin was never intended to be included as part of Tabby Responsive Tabs and is designed to be particularly useful for non-coders.
185
186	+ = How much does the Tabby Responsive Tabs Customiser plugin cost? =
187	+
188	+ The [Tabby Responsive Tabs Customiser plugin](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin") costs 15GBP.
189
190	== Other Notes ==
191

194	== Screenshots ==
195
196	1. On a desktop browser the content is displayed within tabs.
197	+ 2. When the browser width is below the size set in the media query, the tabs are replaced by an accordion.
198
199	== Changelog ==
200
201	+ = 1.1.1 =
202	+
203	+ * Improvements to default CSS
204	+ * Addition of 'open' shortcode attribute to allow tabs other than the first to be open when the page loads
205	+ * First tab now is open by default when displayed as accordion
206	+ * Changed links in plugin table
207	+ * Get Plugin Version function
208	+ * Prevent tabs overlapping if there are too many
209	+ * Remove hard coded paragraph tags in tab content & improve
210	+ * Added icon font support (Font Awesome needs to be loaded by your theme or another plugin)
211	+ * Added functionality to allow target url parameter to control which tab is open on page load.
212	+
213	= 1.0.3 =
214
215	* improved theme compatibility with default css

229
230	== Upgrade Notice ==
231
232	+ = 1.1.1 =
233	+
234	+ * Added Support for Tabby Responsive Tabs Customiser add-on
235	+ * Further improved theme compatibility with default css
236	+ * Control which tab is open on page load using short code parameter or url parameter
237	+ * Font Awesome icon support in tabs
238	+
239	= 1.0.3 =
240
241	* improved theme compatibility with default css
242
243	= 1.0.2 =
244
245	+ * improved efficiency - enqueue plugin only when needed
246	* improved theme compatibility with default css
247
248	= 1.0.1 =

tabby-responsive-tabs.php CHANGED Viewed

	@@ -2,12 +2,12 @@
2	/*
3	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.3
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
	@@ -53,6 +53,24 @@ Author URI: http://cubecolour.co.uk
53
54	*/
55


















56	// ==============================================
57	// Add Links in Plugins Table
58	// ==============================================
	@@ -64,49 +82,60 @@ function cc_tabby_meta_links( $links, $file ) {
64
65	// create the links
66	if ( $file == $plugin ) {
67	- ~~return array_merge( $links, array( '<a href="http://cubecolour.co.uk/wp">Donate</a>', '<a href="http://twitter.com/cubecolour">cubecolour on Twitter</a>' ) );~~


















68	}

69	return $links;
70	}
71
72	// ==============================================

73	// Register & enqueue the stylesheet
74	// If you want to use custom styles, copy the content of the tabby.css to your child theme
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.2'~~);
87	}
88
89	- // ~~==============================================~~
90	- ~~// Register & enqueue the script~~
91	- // ==============================================
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	- */
99	// ==============================================
100	// Trigger the script if it has not already been triggered on the page
101	// ==============================================
102
103	function cc_tabbytrigger() {
104
105	- static $tabbytriggered = FALSE;
106	-
107	if ($tabbytriggered == FALSE) {
108	echo "\n" . "<script>jQuery(document).ready(function($) { RESPONSIVEUI.responsiveTabs(); })</script>" . "\n";
109	-
110	$tabbytriggered = TRUE;
111	}
112	}
	@@ -128,40 +157,71 @@ if ($GLOBALS["reset_firsttab_flag"] === TRUE) {
128	$GLOBALS["reset_firsttab_flag"] = FALSE;
129	}
130
131	- // extract title
132	- extract(shortcode_atts(array(~~"title" => ''), $atts));~~





















133






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
149	add_shortcode('tabby', 'cc_shortcode_tabby');
150	-
151	// ==============================================
152	- // SHORTCODE TO GO AFTER FINAL TABBY TAB
153	// use [tabbyending]
154	// ==============================================

155	function cc_shortcode_tabbyending( $atts, $content = null ) {
156
157	- wp_enqueue_script('tabby', plugins_url('js/tabby.js', __FILE__), array('jquery'), ~~'1.0.2'~~, true);
158
159	add_action('wp_footer', 'cc_tabbytrigger', 20);
160	-
161	$GLOBALS["reset_firsttab_flag"] = TRUE;



162
163	- return '</~~p></~~div></div>';
164	}
165
166	add_shortcode('tabbyending', 'cc_shortcode_tabbyending');
167	-


2	/*
3	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 custom post types by adding simple shortcodes. An easy to use admin page can be added to customise the tab styles with the optional Tabby Responsive Tabs Customiser add-on plugin.
6	Author: cubecolour
7	+ Version: 1.1.1
8	Author URI: http://cubecolour.co.uk
9
10	+ Tabby Responsive Tabs WordPress plugin Copyright 2013-2014 Michael Atkins
11
12	Licenced under the GNU GPL:
13

53
54	*/
55
56	+ // ==============================================
57	+ // Prevent Direct Access of this file
58	+ // ==============================================
59	+
60	+ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if this file is accessed directly
61	+
62	+ // ==============================================
63	+ // Get Plugin Version
64	+ // ==============================================
65	+
66	+ function cc_tabby_plugin_version() {
67	+ if ( ! function_exists( 'get_plugins' ) )
68	+ require_once( ABSPATH . 'wp-admin/includes/plugin.php' );
69	+ $plugin_folder = get_plugins( '/' . plugin_basename( dirname( __FILE__ ) ) );
70	+ $plugin_file = basename( ( __FILE__ ) );
71	+ return $plugin_folder[$plugin_file]['Version'];
72	+ }
73	+
74	// ==============================================
75	// Add Links in Plugins Table
76	// ==============================================

82
83	// create the links
84	if ( $file == $plugin ) {
85	+
86	+ $supportlink = 'https://wordpress.org/support/plugin/tabby-responsive-tabs';
87	+ $donatelink = 'http://cubecolour.co.uk/wp';
88	+ $reviewlink = 'https://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs?rate=5#postform';
89	+ $twitterlink = 'http://twitter.com/cubecolour';
90	+ $customiselink = 'http://cubecolour.co.uk/tabby-responsive-tabs-customiser';
91	+ $iconstyle = 'style="-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"';
92	+
93	+ if ( is_plugin_active( 'tabby-responsive-tabs-customiser/tabby-customiser.php' ) ) {
94	+ $customiselink = admin_url( 'options-general.php?page=tabby-settings' );
95	+ }
96	+
97	+ return array_merge( $links, array(
98	+ '<a href="' . $supportlink . '"> <span class="dashicons dashicons-lightbulb" ' . $iconstyle . 'title="Tabby Responsive Tabs Support"></span></a>',
99	+ '<a href="' . $twitterlink . '"><span class="dashicons dashicons-twitter" ' . $iconstyle . 'title="Cubecolour on Twitter"></span></a>',
100	+ '<a href="' . $reviewlink . '"><span class="dashicons dashicons-star-filled"' . $iconstyle . 'title="Give a 5 Star Review"></span></a>',
101	+ '<a href="' . $donatelink . '"><span class="dashicons dashicons-heart"' . $iconstyle . 'title="Donate"></span></a>',
102	+ '<a href="' . $customiselink . '"><span class="dashicons dashicons-admin-appearance" ' . $iconstyle . 'title="Tabby Responsive Tabs Customizer"></span></a>'
103	+ ) );
104	}
105	+
106	return $links;
107	}
108
109	// ==============================================
110	+ //
111	// Register & enqueue the stylesheet
112	// If you want to use custom styles, copy the content of the tabby.css to your child theme
113	// and stop the default styles from loading by this by adding the following line to the theme's functions.php:
114	//
115	// remove_action('wp_print_styles', 'cc_tabby_css', 30);
116	//
117	+ // Alternatively use the tabby responsive tabs customiser plugin
118	+ // available from from http:cubecolour.co.uk/tabby-responsive-tabs-customiser
119	+ //
120	// ==============================================
121


122	function cc_tabby_css() {
123	+ wp_enqueue_style('tabby.css', plugin_dir_url(__FILE__).'css/tabby.css' , false, cc_tabby_plugin_version() );
124	}
125
126	+ add_action('wp_print_styles', 'cc_tabby_css', 30);
127	+








128	// ==============================================
129	// Trigger the script if it has not already been triggered on the page
130	// ==============================================
131
132	function cc_tabbytrigger() {
133
134	+ static $tabbytriggered = FALSE; // static so only sets the value the first time it is run
135	+
136	if ($tabbytriggered == FALSE) {
137	echo "\n" . "<script>jQuery(document).ready(function($) { RESPONSIVEUI.responsiveTabs(); })</script>" . "\n";
138	+
139	$tabbytriggered = TRUE;
140	}
141	}

157	$GLOBALS["reset_firsttab_flag"] = FALSE;
158	}
159
160	+ // extract title & whether open
161	+ extract(shortcode_atts(array(
162	+ "title" => '',
163	+ "open" => '',
164	+ "icon" => '',
165	+ ), $atts, 'tabbytab'));
166	+
167	+ $tabtarget = sanitize_title_with_dashes( $title );
168	+
169	+ //initialise urltarget
170	+ $urltarget = '';
171	+
172	+ //grab the value of the 'target' url parameter if there is one
173	+ if ( isset ( $_REQUEST['target'] ) ) {
174	+ $urltarget = sanitize_title_with_dashes( $_REQUEST['target'] );
175	+ }
176	+
177	+ // Set Tab Panel Class - add active class if the open attribute is set or the target url parameter matches the dashed version of the tab title
178	+ $tabcontentclass = "tabcontent";
179	+
180	+ if ( ( $open ) \|\| ( isset( $urltarget ) && ( $urltarget == $tabtarget ) ) ) {
181	+ $tabcontentclass .= " responsive-tabs__panel--active";
182	+ }
183
184	+ $addtabicon = '';
185	+
186	+ if ( $icon ) {
187	+ $addtabicon = '<span class="fa fa-' . $icon . '"></span>';
188	+ }
189	+
190	// test whether this is the first tab in the group
191	+ if ( $firsttab ) {
192
193	// Set flag so we know subsequent tabs are not the first in the tab group
194	$firsttab = FALSE;
195	+
196	+ // Build output if we are making the first tab
197	+ return '<div class="responsive-tabs">' . "\n" . '<h2 class="tabtitle">' . $addtabicon . $title . '</h2>' . "\n" . '<div class="' . $tabcontentclass . '">' . "\n";
198	}
199
200	else {
201	+ // Build output if we are making a non-first tab
202	+ return "\n" . '</div><h2 class="tabtitle">' . $addtabicon . $title . '</h2>' . "\n" . '<div class="' . $tabcontentclass . '">' . "\n";
203	}
204	}
205
206	add_shortcode('tabby', 'cc_shortcode_tabby');
207	+
208	// ==============================================
209	+ // SHORTCODE TO BE USED AFTER FINAL TABBY TAB
210	// use [tabbyending]
211	// ==============================================
212	+
213	function cc_shortcode_tabbyending( $atts, $content = null ) {
214
215	+ wp_enqueue_script('tabby', plugins_url('js/tabby.js', __FILE__), array('jquery'), cc_tabby_plugin_version(), true);
216
217	add_action('wp_footer', 'cc_tabbytrigger', 20);
218	+
219	$GLOBALS["reset_firsttab_flag"] = TRUE;
220	+
221	+ global $cc_add_tabby_css;
222	+ $cc_add_tabby_css = true;
223
224	+ return '</div></div>';
225	}
226
227	add_shortcode('tabbyending', 'cc_shortcode_tabbyending');