Tabby Responsive Tabs - Version 1.3.1

Version Description

Fixed issue with the option value saving
using target url parameter overrides open shortcode parameter for which tab is to be open on page load
Shortcode parameters now used in array, not extracted
Priority of tabbytrigger can be changed by adding 'priority' shortcode parameter with an appropriate value
Priority of tabbytrigger changed to 30 by default to prevent breakage on pages created with gutenberg
ico shortcode parameter added to enable custom icons to be added without adding font-awesome prefixes

Release Info

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

Code changes from version 1.2.3 to 1.3.1

Files changed (7) hide show

css/admin.css +160 -0
css/{index.php → index.html} +0 -0
images/tabby.png +0 -0
includes/admin.php +196 -0
js/tabby.js +29 -18
readme.txt +74 -48
tabby-responsive-tabs.php +104 -111

css/admin.css ADDED Viewed

	@@ -0,0 +1,160 @@


1	+ /**
2	+ * Styles for tabby responsive tabs admin page
3	+ *
4	+ */
5	+ .cubecolour:before {
6	+ display: inline-block;
7	+ content: '';
8	+ position: relative;
9	+ top: 3px;
10	+ display: inline-block;
11	+ margin-right: 2px;
12	+ width: 14px;
13	+ height: 14px;
14	+ background: url( 'data:image/svg+xml,%3Csvg%20width%3D%22512%22%20height%3D%22512%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M473%20381L257%20506%2040%20381%2040%20132%20257%207%20473%20132ZM359%20197L256%20137%20152%20197%20152%20316%20256%20376%20359%20316Z%22%20fill%3D%22%23fb8b24%22/%3E%3C/svg%3E' )no-repeat;
15	+ background-size: 14px 14px;
16	+ }
17	+
18	+ .wrap#tabby {
19	+ max-width: 1400px;
20	+ }
21	+
22	+ .tabbyoptions {
23	+ display: grid;
24	+ grid-template-columns: repeat(auto-fit, minmax( 420px, 1fr));
25	+ column-gap: 1.6rem;
26	+ margin: 0;
27	+ }
28	+
29	+ .tabbyoptions .card {
30	+ display: flex;
31	+ flex-direction: column;
32	+ background-color: #fcfcfc;
33	+ display: flex;
34	+ width: auto;
35	+ max-width: 100%;
36	+ display: block;
37	+ padding-bottom: 2em;
38	+ }
39	+
40	+ .tabbyoptions .card h2 {
41	+ font-size: 2em;
42	+ line-height: 1.2;
43	+ height: 2em;
44	+ }
45	+
46	+ .tabbyoptions .card ul li {
47	+ padding-left: 1em;
48	+ }
49	+
50	+ .tabbyoptions .card pre {
51	+ position: relative;
52	+ background-color: #fff;
53	+ padding: 2em 7.5%;
54	+ margin: 2em 2.5%;
55	+ background-image: linear-gradient( 0deg, #bfd9b9 1.67%, #ffffff 1.67%, #ffffff 5%, #bfd9b9 5%, #bfd9b9 6.67%, #fff 6.67%, #fff 10%, #bfd9b9 10%, #bfd9b9 11.67%, #fff 11.67%, #fff 15%, #bfd9b9 15%, #bfd9b9 16.67%, #fff 16.67%, #fff 50%, #bfd9b9 50%, #bfd9b9 51.67%, #ffffff 51.67%, #ffffff 55%, #bfd9b9 55%, #bfd9b9 56.67%, #fff 56.67%, #fff 60%, #bfd9b9 60%, #bfd9b9 61.67%, #fff 61.67%, #fff 65%, #bfd9b9 65%, #bfd9b9 66.67%, #fff 66.67%, #fff 100%);
56	+ background-size: 60px 60px;
57	+ box-shadow: rgba(50, 50, 93, 0.25) 0 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
58	+ border-top: 1px dashed #fff;
59	+ border-bottom: 1px dashed #bbb;
60	+ }
61	+
62	+ .tabbyoptions .card pre:before,
63	+ .tabbyoptions .card pre:after {
64	+ content: '';
65	+ position: absolute;
66	+ width: 26px;
67	+ height: 100%;
68	+ background-image: radial-gradient( #f8f8f8 1px, #d8d8d8 3px, #999 4px, transparent 4px);
69	+ background-size: 26px 26px;
70	+ }
71	+
72	+ .tabbyoptions .card pre:before {
73	+ top: 0;
74	+ left: 0;
75	+ border-right: 1px dashed #ddd;
76	+ }
77	+
78	+ .tabbyoptions .card pre:after {
79	+ top: 0;
80	+ right: 0;
81	+ border-left: 1px dashed #ddd;
82	+ }
83	+
84	+ .tabbyoptions .contribute {
85	+ background-color: #ffd566;
86	+ padding: 2em;
87	+ margin-top: 3em;
88	+ }
89	+
90	+ .tabbycards {
91	+ display: grid;
92	+ grid-template-columns: repeat(auto-fill, minmax( 260px, 1fr));
93	+ column-gap: 1.6rem;
94	+ /* background: url("../images/tabby.png") 100% 98% no-repeat;*/
95	+ margin-top: 0;
96	+ }
97	+
98	+ .tabbycards .card {
99	+ color: #fff;
100	+ display: flex;
101	+ flex-direction:column;
102	+ border: 0;
103	+ position:relative;
104	+ transition: all 1s;
105	+ background-color: #4e426c;
106	+ }
107	+
108	+ .tabbycards .card:hover {
109	+ background-color: #bf461d
110	+ }
111	+
112	+ .tabbycards .card.tabbycat,
113	+ .tabbycards .card.tabbycat:hover {
114	+ background: none;
115	+ }
116	+
117	+ .tabbycards .card h2 {
118	+ color: #fff;
119	+ font-size: 2em;
120	+ line-height: 1.2;
121	+ height: 4em;
122	+ border-bottom: 2px solid currentColor;
123	+ }
124	+
125	+ .tabbycards .card p {
126	+ font-size: 1.1em;
127	+ }
128	+
129	+ .tabbycards form {
130	+ margin-top: 2em;
131	+ background-color: #fff;
132	+ border: 0;
133	+ padding: 1em;
134	+ }
135	+
136	+ .tabbycards .card .submit {
137	+ border-top: 2px solid currentColor;
138	+ }
139	+
140	+ .tabbycards .submit {
141	+ margin-top: auto;
142	+ text-align: center;
143	+ max-width: 100%;
144	+ padding-top: 2em;
145	+ }
146	+
147	+ .card.tabbycat {
148	+ min-height: 220px;
149	+ justify-self: end;
150	+ padding: 0;
151	+ width: 100%;
152	+ box-shadow: none;
153	+ }
154	+
155	+ .tabbycat img {
156	+ position: absolute;
157	+ bottom: 1em;
158	+ width: 100%;
159	+ height: auto;
160	+ }

css/{index.php → index.html} RENAMED Viewed

File without changes

images/tabby.png ADDED Viewed

Binary file

includes/admin.php ADDED Viewed

	@@ -0,0 +1,196 @@


1	+ <?php
2	+
3	+ /* --------------------------------------------- *\
4	+
5	+ Package: Tabby Responsive Tabs plugin for WordPress
6	+ Author: cubecolour
7	+ Version: 1.3.0
8	+
9	+ File: Admin Panel
10	+ admin.php
11	+
12	+ \* --------------------------------------------- */
13	+
14	+ if ( ! defined( 'ABSPATH' ) ) exit;
15	+
16	+
17	+ /**
18	+ * Register and enqueue the stylesheet
19	+ *
20	+ */
21	+ function cc_tabby_rt_admin_css() {
22	+ wp_register_style( 'cc-tabby-admin-css', CC_TABBY_PLUGIN_URL . 'css/admin.css', '', '1.3.0' );
23	+ wp_enqueue_style( 'cc-tabby-admin-css' );
24	+ }
25	+ add_action( 'admin_enqueue_scripts', 'cc_tabby_rt_admin_css' );
26	+
27	+
28	+ /**
29	+ * Add Options sub-page
30	+ *
31	+ */
32	+ if ( is_admin() ){
33	+ //* add menu & call register settings function
34	+ add_action( 'admin_menu' , 'cc_tabby_menu' );
35	+ add_action( 'admin_init', 'cc_register_tabby_settings' );
36	+ }
37	+
38	+ function cc_tabby_menu() {
39	+ //* create new sub-menu under the Settings top level menu
40	+ $page = add_submenu_page( 'options-general.php', 'Tabby', 'Tabby', 'manage_options', 'tabby-settings', 'cc_tabby_settings_page' );
41	+ }
42	+
43	+
44	+ /**
45	+ * Create the Settings
46	+ *
47	+ */
48	+ function cc_register_tabby_settings() {
49	+
50	+ //* Assign default values
51	+ add_option( 'cc_tabby_default_styles', 1 );
52	+
53	+ //* register the settings
54	+ register_setting( 'tabby-settings', 'cc_tabby_default_styles' );
55	+ }
56	+
57	+ function cc_tabby_settings_page() {
58	+
59	+ if ( !current_user_can( 'manage_options' ) ) {
60	+ wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
61	+ }
62	+
63	+ ?> <div class="wrap" id="tabby">
64	+ <h2>Tabby responsive tabs</h2>
65	+ <p>by <a href="https://cubecolour.co.uk/wp" class="cubecolour">cubecolour</a></p>
66	+
67	+
68	+ <ul class="tabbyoptions">
69	+ <!- - - - - - - ->
70	+ <li class="card">
71	+ <h2><?php esc_attr_e( 'Default stylesheet', 'tabby-responsive-tabs' ) ?></h2>
72	+ <p><?php esc_attr_e( 'If you are using a custom set of tabby styles in your child theme or elsewhere, uncheck the checkbox below to remove the default tabby stylesheet.' ) ?></p>
73	+ <form method="post" action="options.php">
74	+
75	+ <?php settings_fields( 'tabby-settings' ); ?>
76	+ <?php do_settings_sections( 'tabby-settings' ); ?>
77	+
78	+ <label for="cc_tabby_default_styles"><?php esc_attr_e( 'Include the default tabby stylesheet:' ) ?></label>
79	+ <input type="checkbox" name="cc_tabby_default_styles" value=1 <?php checked( 1, get_option('cc_tabby_default_styles'), 1 ); ?> />
80	+ <?php submit_button( $text = "Save Change", $type = 'primary' ); ?>
81	+ </form>
82	+ <p>To customise how your tabs display, either:
83	+ <ul>
84	+ <li>Uncheck the option above, copy the css rules from the <a href="<?php echo CC_TABBY_PLUGIN_URL . 'css/tabby.css'; ?>" target="_blank">tabby stylesheet</a> into your child theme's stylesheet or the custom css section of the WordPress customizer, and edit the css there.</li>
85	+ <li>Alternatively the optional Tabby responsive tabs customiser add-on can be used to customise the tab design without any code editing.</li>
86	+ </ul>
87	+ <div class="contribute">
88	+ If this plugin or has provided you with some value, or it has saved you some development time, please consider purchasing an add-on, or making a contribution to <a href="https://cubecolour.co.uk/wp/">Michael's beverage fund</a>.
89	+ </div>
90	+ </li>
91	+ <!- - - - - - - ->
92	+ <li class="card usage">
93	+ <h2><?php esc_attr_e( 'Plugin usage' ); ?></h2>
94	+
95	+ <p>There are two shortcodes which should both be used <code>[tabby]</code> and <code>[tabbyending]</code>. These are added in the visual or text editor, or within a shortcode block in the block editor.</p>
96	+ <p>The title parameter sets the text on the tab, the content is added between the shortcodes, and the tabbyending shortcode is used once per tabgroup and must be placed after the last tab's content.</p>
97	+ <p>It is recommended to leave a blank line between each shortcode and block of content.</p>
98	+
99	+ <pre>
100	+ [tabby title="First Tab"]
101	+
102	+ This is the content of the first tab.
103	+
104	+ [tabby title="Second Tab"]
105	+
106	+ This is the content of the second tab.
107	+
108	+ [tabby title="Third Tab"]
109	+
110	+ This is the content of the third tab.
111	+
112	+ [tabbyending]
113	+ </pre>
114	+
115	+ <p>Please refer to the plugin's <a href="<?php echo CC_TABBY_PLUGIN_URL . 'readme.txt'; ?>" target="_blank">readme file</a> or the WordPress.org <a href="https://en-gb.wordpress.org/plugins/tabby-responsive-tabs/" target="_blank">plugin page</a> for more information.</p>
116	+ </p>Plugin support on WordPress.org: <a href="https://wordpress.org/support/plugin/tabby-responsive-tabs/">tabby responsive tabs support forum</a>.</p>
117	+ </li>
118	+ </ul>
119	+ <!- - - - - - - ->
120	+ <ul class="tabbycards">
121	+ <!- - - - - - - ->
122	+ <li class="card">
123	+ <h2><?php esc_attr_e( 'Tabby responsive tabs customiser' ) ?></h2>
124	+ <p><?php esc_attr_e( 'An add-on for tabby responsive tabs which allows anyone to easily customise their tabs.' ) ?></p>
125	+ <p><?php esc_attr_e( 'All customisations are made using a simple point & click interface without the need to edit any code.' ) ?></p>
126	+ <p><?php esc_attr_e( 'A collection of one-click presets can be used as an easy starting point for further customisation.' ) ?></p>
127	+ <p></p>
128	+ <p class="submit">
129	+ <a href="https://cubecolour.co.uk/tabby-responsive-tabs-customiser/" class="button button-primary"><?php esc_attr_e( 'Purchase add-on' ) ?></a>
130	+ </p>
131	+ </li>
132	+ <!- - - - - - - ->
133	+ <li class="card">
134	+ <h2><?php esc_attr_e( 'Tabby link to tab' ) ?></h2>
135	+ <p><?php esc_attr_e( 'An add-on for tabby responsive tabs which adds a [tabbylink] shortcode.' ) ?></p>
136	+ <p><?php esc_attr_e( 'This plugin enable you to add links on the same page as a tabgroup which select a tab without the page needing to reload the page.' ) ?></p>
137	+ <p><?php esc_attr_e( 'This add-on should not be confused with the similarly named \'Tabby tab to url link\' add-on as each one has a different purpose.' ) ?></p>
138	+ <p></p>
139	+ <p class="submit">
140	+ <a href="https://cubecolour.co.uk/downloads/tabby-link-to-tab/" class="button button-primary"><?php esc_attr_e( 'Purchase add-on' ) ?></a>
141	+ </p>
142	+ </li>
143	+ <!- - - - - - - ->
144	+ <li class="card">
145	+ <h2><?php esc_attr_e( 'Tabby tab to url link' ) ?></h2>
146	+ <p><?php esc_attr_e( 'An add-on for tabby responsive tabs which a tab to act as a link to any URL.' ) ?></p>
147	+ <p><?php esc_attr_e( 'A tab can be specified within a tabby responsive tabs tabgroup so that it opens a link to any URL.' ) ?></p>
148	+ <p><?php esc_attr_e( 'This add-on should not be confused with the similarly named \'Tabby link to tab\' add-on as each one has a different purpose.' ) ?></p>
149	+ <p></p>
150	+ <p class="submit">
151	+ <a href="https://cubecolour.co.uk/downloads/tabby-tab-to-url-link/" class="button button-primary"><?php esc_attr_e( 'Purchase add-on' ) ?></a>
152	+ </p>
153	+ </li>
154	+ <!- - - - - - - ->
155	+ <li class="card">
156	+ <h2><?php esc_attr_e( 'Tabby load accordion closed' ) ?></h2>
157	+ <p><?php esc_attr_e( 'An add-on for tabby responsive tabs that keeps all sections of the accordion closed on page load.' ) ?></p>
158	+ <p><?php esc_attr_e( 'This changes the default behaviour for the accordion so no tab content is shown when the page is initially loaded.' ) ?></p>
159	+ <p><?php esc_attr_e( 'The tab display (desktop view) is unaffected.' ) ?></p>
160	+ <p></p>
161	+ <p class="submit">
162	+ <a href="https://cubecolour.co.uk/downloads/tabby-load-accordion-closed/" class="button button-primary"><?php esc_attr_e( 'Purchase add-on' ) ?></a>
163	+ </p>
164	+ </li>
165	+ <!- - - - - - - ->
166	+ <li class="card">
167	+ <h2><?php esc_attr_e( 'Tabby reopen current tab on reload' ) ?></h2>
168	+ <p><?php esc_attr_e( 'An add-on for tabby responsive tabs to keep the currently active tab open after a reload.' ) ?></p>
169	+ <p><?php esc_attr_e( 'This enables the currently active tab in a tabby responsive tabs tabgroup to remain the active (open) tab after the page has been reloaded/refreshed.' ) ?></p>
170	+ <p></p>
171	+ <p class="submit">
172	+ <a href="https://cubecolour.co.uk/downloads/tabby-reopen-current-tab-on-reload/" class="button button-primary"><?php esc_attr_e( 'Purchase add-on' ) ?></a>
173	+ </p>
174	+ </li>
175	+ <!- - - - - - - ->
176	+ <li class="card">
177	+ <h2><?php esc_attr_e( 'Custom styles or functionality' ) ?></h2>
178	+ <p><?php esc_attr_e( 'I can create a custom plugin specifically for your site' ) ?></p>
179	+ <p><?php esc_attr_e( 'This is a bespoke service to provide a custom-made add-on plugin to extend tabby responsive tabs or load a custom tabs stylesheet created to meet your exact requirements' ) ?></p>
180	+ <p></p>
181	+ <p class="submit">
182	+ <a href="https://cubecolour.co.uk/contact/" class="button button-primary"><?php esc_attr_e( 'Request quote' ) ?></a>
183	+ </p>
184	+ </li>
185	+ <!- - - - - - - ->
186	+ <li class="card tabbycat"></li>
187	+ <!- - - - - - - ->
188	+ <li class="card tabbycat">
189	+ <img src="<?php echo CC_TABBY_PLUGIN_URL . 'images/tabby.png'; ?>">
190	+ </li>
191	+ <!- - - - - - - ->
192	+ </ul>
193	+
194	+ <?php
195	+ echo '</div>';
196	+ }

js/tabby.js CHANGED Viewed

	@@ -1,5 +1,5 @@
1	/* ----------------
2	- Tabby.js 1.2.0
3
4	based on ResponsiveTabs.js 1.10
5	by Pete Love
	@@ -8,12 +8,12 @@ by Pete Love
8	var RESPONSIVEUI = {};
9
10	(function($) {
11	-
12	RESPONSIVEUI.responsiveTabs = function () {
13	var $tabSets = $('.responsive-tabs');
14
15	if (!$tabSets.hasClass('responsive-tabs--enabled')) { // if we haven't already called this function and enabled tabs
16	- $tabSets.addClass('responsive-tabs--enabled');
17
18	//loop through all sets of tabs on the page
19	var tablistcount = 1;
	@@ -33,7 +33,7 @@ var RESPONSIVEUI = {};
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");
	@@ -73,7 +73,7 @@ var RESPONSIVEUI = {};
73	// CREATE TAB ITEMS (VISIBLE ON DESKTOP)
74	//create tab list item from heading
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,
	@@ -94,10 +94,10 @@ var RESPONSIVEUI = {};
94
95	// remove hidden mobile class from any other panel as we'll want that panel to be open at mobile size
96	$tabs.find('.responsive-tabs__panel--closed-accordion-only').removeClass('responsive-tabs__panel--closed-accordion-only');
97	-
98	// close current panel and remove active state from its (hidden on desktop) heading
99	$tabs.find('.responsive-tabs__panel--active').toggle().removeClass('responsive-tabs__panel--active').attr('aria-hidden','true').prev().removeClass('responsive-tabs__heading--active');
100	-
101	//make this tab panel active
102	$tabPanel.toggle().addClass('responsive-tabs__panel--active').attr('aria-hidden','false');
103
	@@ -112,10 +112,10 @@ var RESPONSIVEUI = {};
112
113	//reset height of tab panels to auto
114	$tabsWrapper.css('height', 'auto');
115	-
116	}
117	});
118	-
119	//associate tab panel with tab list item
120	$tabPanel.attr({
121	'role': 'tabpanel',
	@@ -131,7 +131,7 @@ var RESPONSIVEUI = {};
131	// add tab item
132	$tabList.append($tabListItem);
133
134	-
135	// TAB HEADINGS (VISIBLE ON MOBILE)
136	// if user presses 'enter' on tab heading trigger the click event
137	$tabHeading.keydown(function(objEvent) {
	@@ -142,7 +142,7 @@ var RESPONSIVEUI = {};
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
	@@ -151,15 +151,15 @@ var RESPONSIVEUI = {};
151
152	var oldActivePos,
153	$activeHeading = $tabs.find('.responsive-tabs__heading--active');
154	-
155	// if there is an active heading, get its position
156	if($activeHeading.length) {
157	oldActivePos = $activeHeading.offset().top;
158	}
159	-
160	// close currently active panel and remove active state from any hidden heading
161	$tabs.find('.responsive-tabs__panel--active').slideToggle().removeClass('responsive-tabs__panel--active').prev().removeClass('responsive-tabs__heading--active');
162	-
163	//close all tabs
164	$tabs.find('.responsive-tabs__panel').hide().attr('aria-hidden','true');
165
	@@ -197,7 +197,7 @@ var RESPONSIVEUI = {};
197
198	//don't alter classes on tabs as we want it active if put back to desktop size
199	}
200	-
201	});
202
203	tabcount ++;
	@@ -205,12 +205,23 @@ var RESPONSIVEUI = {};
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);~~


1	/* ----------------
2	+ Tabby.js 1.3.0
3
4	based on ResponsiveTabs.js 1.10
5	by Pete Love

8	var RESPONSIVEUI = {};
9
10	(function($) {
11	+
12	RESPONSIVEUI.responsiveTabs = function () {
13	var $tabSets = $('.responsive-tabs');
14
15	if (!$tabSets.hasClass('responsive-tabs--enabled')) { // if we haven't already called this function and enabled tabs
16	+ $tabSets.addClass('responsive-tabs--enabled');
17
18	//loop through all sets of tabs on the page
19	var tablistcount = 1;

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");

73	// CREATE TAB ITEMS (VISIBLE ON DESKTOP)
74	//create tab list item from heading
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,

94
95	// remove hidden mobile class from any other panel as we'll want that panel to be open at mobile size
96	$tabs.find('.responsive-tabs__panel--closed-accordion-only').removeClass('responsive-tabs__panel--closed-accordion-only');
97	+
98	// close current panel and remove active state from its (hidden on desktop) heading
99	$tabs.find('.responsive-tabs__panel--active').toggle().removeClass('responsive-tabs__panel--active').attr('aria-hidden','true').prev().removeClass('responsive-tabs__heading--active');
100	+
101	//make this tab panel active
102	$tabPanel.toggle().addClass('responsive-tabs__panel--active').attr('aria-hidden','false');
103

112
113	//reset height of tab panels to auto
114	$tabsWrapper.css('height', 'auto');
115	+
116	}
117	});
118	+
119	//associate tab panel with tab list item
120	$tabPanel.attr({
121	'role': 'tabpanel',

131	// add tab item
132	$tabList.append($tabListItem);
133
134	+
135	// TAB HEADINGS (VISIBLE ON MOBILE)
136	// if user presses 'enter' on tab heading trigger the click event
137	$tabHeading.keydown(function(objEvent) {

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

151
152	var oldActivePos,
153	$activeHeading = $tabs.find('.responsive-tabs__heading--active');
154	+
155	// if there is an active heading, get its position
156	if($activeHeading.length) {
157	oldActivePos = $activeHeading.offset().top;
158	}
159	+
160	// close currently active panel and remove active state from any hidden heading
161	$tabs.find('.responsive-tabs__panel--active').slideToggle().removeClass('responsive-tabs__panel--active').prev().removeClass('responsive-tabs__heading--active');
162	+
163	//close all tabs
164	$tabs.find('.responsive-tabs__panel').hide().attr('aria-hidden','true');
165

197
198	//don't alter classes on tabs as we want it active if put back to desktop size
199	}
200	+
201	});
202
203	tabcount ++;

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	+ // Additional helper function to ensure embedded tab content will be visible when the tab is opened
217	+ $("body").on("click", ".responsive-tabs__list__item, .responsive-tabs__heading, .tabbylink", function() {
218	+ if (typeof(Event) === "function") {
219	+ window.dispatchEvent(new Event("resize"));
220	+ } else {
221	+ var evt = window.document.createEvent("UIEvents");
222	+ evt.initUIEvent("resize", true, false, window, 0);
223	+ window.dispatchEvent(evt);
224	+ }
225	+ });
226	+
227	+ })(jQuery);

readme.txt CHANGED Viewed

	@@ -2,10 +2,11 @@
2	Contributors: numeeja
3	Donate link: http://cubecolour.co.uk/wp
4	Tags: tabs, tab, responsive, accordion, shortcode
5	- ~~Requires~~ at ~~least~~: 3.7
6	- ~~Tested~~ ~~up to~~: 4.9.1
7	- ~~Stable tag~~: ~~1.2.3~~
8	- License: ~~GPLv2~~ / ~~MIT~~

9
10	Create responsive tabs inside your posts, pages or custom post content by adding simple shortcodes inside the post editor.
11
	@@ -18,19 +19,22 @@ Create responsive tabs inside your posts, pages or custom post content by adding
18	* Aria attributes and roles aid screen reader accessibility
19	* Tabs and content are accessible via keyboard
20
21	- The Tabby Responsive Tabs plugin is designed to be an easy and lightweight way to add responsive tabs to your content. ~~There~~ ~~is no admin panel and experienced~~ developers should be able to easily ~~customise~~ how the tabs display on their site by replacing the built-in CSS rules with a customised version (see note below for more details of this).
22
23	= Optional Add-ons =
24	- > The [Tabby ~~Responsive~~ ~~Tabs~~ ~~Customiser~~](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on adds a settings panel with several parameters for customising your tabs. to provide the easiest way to customise the display of your tabs without editing any code. You can use the default tabby styles or one of the included one-click presets as a starting point for customisation. It also enables you to easily add icons to your tab titles.
25
26	- > The [Tabby ~~Link~~ to ~~Tab~~](http://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby Link to Tab") add-on provides a simple shortcode to create links to specific tabs which can appear anywhere on the same page as the tabgroup without the page needing to reload.
27
28	- > The [Tabby ~~Tab~~ to URL ~~Link~~](http://cubecolour.co.uk/downloads/tabby-tab-to-url-link/ "Tabby Tab to URL Link") add-on enables you to set one or more of your tabs to act as a link to any URL.




29
30	- > The [Tabby Load Accordion Closed](http://cubecolour.co.uk/downloads/tabby-load-accordion-closed/ "Tabby Load Accordion Closed") add-on changes the default behaviour when the tabs are displayed as an accordion so no accordion sections are open when the page initially loads.
31	= Usage: =
32
33	- There are two shortcodes which should both be used `[tabby]` and `[tabbyending]`
34
35	`[tabby title="tabname"]`
36
	@@ -41,41 +45,43 @@ Add the tab content after the shortcode.
41	Add a `[tabbyending]` shortcode after the content of the last tab in a tabgroup.
42
43	= Example =
44	- If you copy & paste this example into your own page instead of typing them, ensure that any stray <code> or <pre> tags ~~are~~ ~~deleted~~.
45
46	`
47
48	[tabby title="First Tab"]
49
50	- ~~Tabby ipsum dolor sit amet, kitty sunbathe dolor, feed me.~~


51
52	[tabby title="Second Tab"]
53
54	- ~~Lay down in your way catnip stuck in a tree, sunbathe kittens.~~


55
56	[tabby title="Third Tab"]
57
58	- ~~sleep in the sink climb the curtains attack, give me fish.~~


59
60	[tabbyending]
61
62	`
63
64	- note: To prevent stray paragraph tags being introduced by WordPress's wpautop filter, ensure that ~~you~~ ~~leave~~ a blank line above and below each tabby shortcode and the tabbyending.
65
66	You can see the tabs on the [demo page](http://cubecolour.co.uk/tabby-responsive-tabs/ "Tabby Responsive Tabs demo").
67


68	If you want to change how the tabs and accordion display on your site, you have two options:
69
70	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.
71
72	- 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:~~
73	-
74	- code:
75	-
76	- `
77	- <?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>
78	- `
79
80	= Additional Shortcode attributes =
81
	@@ -93,13 +99,13 @@ If you use the 'open' shortcode parameter in one of your tab shortcodes, ensure
93
94	Icon
95
96	- 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:
97	`
98
99	[tabby title="My Tab" icon="cog"]
100
101	`
102	- This adds a pseudo-element before the tab title 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.
103
104	The [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin can be used to add the Font Awesome files required to display the icons in the tab titles.
105
	@@ -112,6 +118,8 @@ If you want to link to a 'contacts' page with a tab titled 'Phone Numbers' open,
112	yoursite.com/contact/?target=phone-numbers
113
114	`


115	If you want a tab with the title 'email addresses' to be open, the url would look like:
116	`
117	yoursite.com/contact/?target=email-addresses
	@@ -120,6 +128,8 @@ If you want a tab with the title 'entrées' to be open (with an acute acce
120	`
121	yoursite.com/contact/?target=entrees
122	`


123	== Installation ==
124
125	1. Upload the Tabby Responsive Tabs plugin folder to your '/wp-content/plugins/' directory
	@@ -152,17 +162,17 @@ These extra tags are often be added by WordPress's wpautop function. It is recom
152	= Pasted-in shortcodes aren't working or the tabs have a 'stepped' appearance =
153	If you are copying & pasting the example shortcodes into the visual editor and the shortcodes don't seem to be working or the tabs appear in a stepped configuration, look at the page in the text editor to be sure that you aren't adding in any extra markup that isn't visible in the visual editor. Delete any opening and closing <pre> and/or <code> tags pairs surrounding the tab shortcodes. (this would apply to any plugin using shortcodes).
154



155	= Where is the plugin's admin page? =
156
157	- ~~There isn't one. This is a lightweight plugin with no options.~~ If you want to be able to customise 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.
158
159	= Does this plugin work with responsive Themes? =
160
161	Yes - it should work with any well-coded responsive theme.
162
163	- = Does it work with non-responsive Themes? =
164	-
165	- 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 may not switch to an accordion display on a mobile device.
166
167	= Does it work with a multisite installation of WordPress? =
168
	@@ -170,10 +180,9 @@ Yes
170
171	= How can I change the colours? =
172
173	- 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):~~
174	- `<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>`
175
176	- 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.
177
178	= Can I change the responsive breakpoint from the default 767px? =
179
	@@ -181,17 +190,10 @@ Yes, you can see where that is set in the plugin's CSS. Refer to the answer abov
181
182	This value can also be set using the Tabby Responsive Tabs Customiser plugin's admin panel.
183
184	- = Why Doesn't my slider or (non native WP) gallery work in any tab except the first one? =
185	-
186	- Some carousel/slider/gallery 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. Native WordPress galleries also work with no problems.
187
188	= How can I get rid of unmatched opening or closing paragraph tags in the tabs making my markup invalid? =
189
190	- This is caused by WordPress's wpautop filter ~~which~~ is applied to ~~your~~ post/page content. To prevent stray paragraph tags appearing, ~~ensure that you~~ leave a blank line before and after each shortcode.
191	-
192	- = Why Doesn't my Google Map work in any tab except the first one? =
193	-
194	- Some google maps plugins render their content with zero height & width if the tab containing the content is not visible on page load. I have been able to show maps within tabs using the [WP Flexible Map](https://wordpress.org/plugins/wp-flexible-map/ "WP Flexible Map") plugin.
195
196	= Can I display multiple tab groups on a single page? =
197
	@@ -207,7 +209,7 @@ add_filter('widget_text', 'do_shortcode');
207	This filter will enable you to use any shortcodes within text widgets.
208
209
210	- = Can I nest a ~~tag~~ ~~group~~ within an existing tab? =
211
212	No, this is not supported.
213
	@@ -219,6 +221,10 @@ Yes, see the documentation for the 'open' shortcode parameter for details.
219
220	Yes, see the documentation for the usage of a 'target' URL parameter in the link.
221




222	= I've just updated the plugin and the tabs are now displaying differently =
223
224	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.
	@@ -246,8 +252,7 @@ This is not possible with the target parameter, however this can be achieved by
246
247	= How will the tabs print? =
248
249	- Basic print styles are included ~~in a print media query at the end of the plugin stylesheet (from version 1~~.~~2).~~ This is designed to print the tab titles and content in series. ~~If you are using custom styles for your tabs, you can copy these print styles to the end of your custom styles and customise them.~~
250	-
251	= Are there any other free cubecolour plugins? =
252
253	If you like Tabby Responsive Tabs, you may like some of my other plugins in the WordPress.org plugins directory. These are listed on my [profile](http://profiles.wordpress.org/numeeja/ "cubecolour profile") page under the 'plugins' tab.
	@@ -266,13 +271,13 @@ You can donate any amount via [my donation page](http://cubecolour.co.uk/wp/ "cu
266
267	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")
268
269	- = Is the Tabby Responsive Tabs Customiser a Premium or Pro Version of Tabby Responsive Tabs? =
270
271	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.
272
273	= Why is the Tabby Responsive Tabs Customiser an add-on plugin rather than part of Tabby Responsive Tabs? =
274
275	- 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~~.
276
277	= What is the Tabby Link to Tab plugin? =
278
	@@ -280,10 +285,6 @@ Tabby Link to tab is an optional add-on for Tabby Responsive Tabs which provides
280
281	For more details please see: [Tabby Link to Tab plugin](http://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby Link to Tab plugin"). This add-on was developed after several users requested the functionality.
282
283	- = How much do the Tabby Responsive Tabs Customiser & Tabby Link to Tab add-ons cost? =
284	-
285	- These cost 19GBP each for use on a single site. A developer option for each is also available or 79GBP which can be used on all the sites you own or control.
286	-
287	== Screenshots ==
288
289	1. On a desktop browser the content is displayed within tabs.
	@@ -292,6 +293,21 @@ These cost 19GBP each for use on a single site. A developer option for each is a
292
293	== Changelog ==
294















295	= 1.2.3 =
296
297	* Enable targeting the tab from url query string when the title contains an accent
	@@ -339,6 +355,16 @@ These cost 19GBP each for use on a single site. A developer option for each is a
339
340	== Upgrade Notice ==
341










342	= 1.2.3 =
343
344	* Enable targeting the tab from url query string when the title contains an accent


2	Contributors: numeeja
3	Donate link: http://cubecolour.co.uk/wp
4	Tags: tabs, tab, responsive, accordion, shortcode
5	+ Tested up to: 5.9
6	+ Stable tag: 1.3.1
7	+ License: GPLv2
8	+ License URI: https://www.gnu.org/licenses/gpl-2.0.html
9	+ License of javascript:
10
11	Create responsive tabs inside your posts, pages or custom post content by adding simple shortcodes inside the post editor.
12

19	* Aria attributes and roles aid screen reader accessibility
20	* Tabs and content are accessible via keyboard
21
22	+ The Tabby Responsive Tabs plugin is designed to be an easy and lightweight way to add responsive tabs to your content. Experienced developers should be able to easily customize how the tabs display on their site by replacing the built-in CSS rules with a customised version (see note below for more details of this).
23
24	= Optional Add-ons =
25	+ > The [Tabby responsive tabs customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on adds a settings panel with several parameters for customising your tabs. to provide the easiest way to customise the display of your tabs without editing any code. You can use the default tabby styles or one of the included one-click presets as a starting point for customisation. It also enables you to easily add icons to your tab titles.
26
27	+ > The [Tabby link to tab](http://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby Link to Tab") add-on provides a simple shortcode to create links to specific tabs which can appear anywhere on the same page as the tabgroup without the page needing to reload.
28
29	+ > The [Tabby tab to URL link](http://cubecolour.co.uk/downloads/tabby-tab-to-url-link/ "Tabby Tab to URL Link") add-on enables you to set one or more of your tabs to act as a link to any URL.
30	+
31	+ > The [Tabby load accordion closed](http://cubecolour.co.uk/downloads/tabby-load-accordion-closed/ "Tabby Load Accordion Closed") add-on changes the default behaviour when the tabs are displayed as an accordion so no accordion sections are open when the page initially loads.
32	+
33	+ > The [Tabby reopen current tab on reload](https://cubecolour.co.uk/downloads/tabby-reopen-current-tab-on-reload/ "Tabby Tab to URL Link") add-on enables the currently active tab to remain the active (open) tab after the page has been reloaded/refreshed.
34

35	= Usage: =
36
37	+ There are two shortcodes which should both be used to create the tab group: `[tabby]` and `[tabbyending]`
38
39	`[tabby title="tabname"]`
40

45	Add a `[tabbyending]` shortcode after the content of the last tab in a tabgroup.
46
47	= Example =
48	+ If you copy & paste this example into your own page instead of typing them, ensure that you delete any stray <code> or <pre> tags that might have appeared.
49
50	`
51
52	[tabby title="First Tab"]
53
54	+
55	+ This is the content of the first tab.
56	+
57
58	[tabby title="Second Tab"]
59
60	+
61	+ This is the content of the second tab.
62	+
63
64	[tabby title="Third Tab"]
65
66	+
67	+ This is the content of the third tab.
68	+
69
70	[tabbyending]
71
72	`
73
74	+ note: To prevent stray paragraph tags being introduced by WordPress's wpautop filter, ensure that there is a blank line above and below each tabby shortcode and the tabbyending.
75
76	You can see the tabs on the [demo page](http://cubecolour.co.uk/tabby-responsive-tabs/ "Tabby Responsive Tabs demo").
77
78	+ You can add the shortcodes to a page made using the WordPress block editor by using WordPress's shortcode block.
79	+
80	If you want to change how the tabs and accordion display on your site, you have two options:
81
82	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.
83
84	+ 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 going to the admin page at settings => tabby and unchecking the "Include the default tabby stylesheet" checkbox.






85
86	= Additional Shortcode attributes =
87

99
100	Icon
101
102	+ 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 icon 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:
103	`
104
105	[tabby title="My Tab" icon="cog"]
106
107	`
108	+ This adds a pseudo element before the tab title 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.
109
110	The [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin can be used to add the Font Awesome files required to display the icons in the tab titles.
111

118	yoursite.com/contact/?target=phone-numbers
119
120	`
121	+
122	+
123	If you want a tab with the title 'email addresses' to be open, the url would look like:
124	`
125	yoursite.com/contact/?target=email-addresses

128	`
129	yoursite.com/contact/?target=entrees
130	`
131	+ Using a target url parameter will override any open shortcode parameters used.
132	+
133	== Installation ==
134
135	1. Upload the Tabby Responsive Tabs plugin folder to your '/wp-content/plugins/' directory

162	= Pasted-in shortcodes aren't working or the tabs have a 'stepped' appearance =
163	If you are copying & pasting the example shortcodes into the visual editor and the shortcodes don't seem to be working or the tabs appear in a stepped configuration, look at the page in the text editor to be sure that you aren't adding in any extra markup that isn't visible in the visual editor. Delete any opening and closing <pre> and/or <code> tags pairs surrounding the tab shortcodes. (this would apply to any plugin using shortcodes).
164
165	+ = I am using custom styles in my theme, how do I ensure the default tabby stylesheet is not loaded? =
166	+ In your your WordPress admin, go to settings -> tabby and uncheck the "Include the default tabby stylesheet" checkbox.
167	+
168	= Where is the plugin's admin page? =
169
170	+ If you want to be able to customise 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.
171
172	= Does this plugin work with responsive Themes? =
173
174	Yes - it should work with any well-coded responsive theme.
175



176
177	= Does it work with a multisite installation of WordPress? =
178

180
181	= How can I change the colours? =
182
183	+ 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 going to settings -> tabby in your WordPress admin, and uncheck the "Include the default tabby stylesheet" checkbox.

184
185	+ 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 customiser plugin was designed to be easy for non-developers to use to customise how the tabs display.
186
187	= Can I change the responsive breakpoint from the default 767px? =
188

190
191	This value can also be set using the Tabby Responsive Tabs Customiser plugin's admin panel.
192



193
194	= How can I get rid of unmatched opening or closing paragraph tags in the tabs making my markup invalid? =
195
196	+ This can be caused by WordPress's wpautop filter being applied to the post/page content. To prevent stray paragraph tags appearing, leave a blank line before and after each shortcode.




197
198	= Can I display multiple tab groups on a single page? =
199

209	This filter will enable you to use any shortcodes within text widgets.
210
211
212	+ = Can I nest a Tag Group within an existing tab? =
213
214	No, this is not supported.
215

221
222	Yes, see the documentation for the usage of a 'target' URL parameter in the link.
223
224	+ = I want to use a custom class for my icons without the font-awesome prefixes =
225	+
226	+ You can do this by using an 'ico' parameter instead of the 'icon' parameter in the shortcode.
227	+
228	= I've just updated the plugin and the tabs are now displaying differently =
229
230	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.

252
253	= How will the tabs print? =
254
255	+ Basic print styles are included. This is designed to print the tab titles and content in series.

256	= Are there any other free cubecolour plugins? =
257
258	If you like Tabby Responsive Tabs, you may like some of my other plugins in the WordPress.org plugins directory. These are listed on my [profile](http://profiles.wordpress.org/numeeja/ "cubecolour profile") page under the 'plugins' tab.

271
272	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")
273
274	+ = Is the Tabby Responsive Tabs Customiser plugin a Premium or Pro Version of Tabby Responsive Tabs? =
275
276	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.
277
278	= Why is the Tabby Responsive Tabs Customiser an add-on plugin rather than part of Tabby Responsive Tabs? =
279
280	+ 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 people who prefer not to code.
281
282	= What is the Tabby Link to Tab plugin? =
283

285
286	For more details please see: [Tabby Link to Tab plugin](http://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby Link to Tab plugin"). This add-on was developed after several users requested the functionality.
287




288	== Screenshots ==
289
290	1. On a desktop browser the content is displayed within tabs.

293
294	== Changelog ==
295
296	+ = 1.3.1 =
297	+ * Fixed issue with the option value saving
298	+ * using target url parameter overrides open shortcode parameter for which tab is to be open on page load
299	+ * Shortcode parameters now used in array, not extracted
300	+ * Priority of tabbytrigger can be changed by adding 'priority' shortcode parameter with an appropriate value
301	+ * Priority of tabbytrigger changed to 30 by default to prevent breakage on pages created with gutenberg
302	+ * ico shortcode parameter added to enable custom icons to be added without adding font-awesome prefixes
303	+
304	+ = 1.3.0 =
305	+ * using target url parameter overrides open shortcode parameter for which tab is to be open on page load
306	+ * Shortcode parameters now used in array, not extracted
307	+ * Priority of tabbytrigger can be changed by adding 'priority' shortcode parameter with an appropriate value
308	+ * Priority of tabbytrigger changed to 30 by default to prevent breakage on pages created with gutenberg
309	+ * ico shortcode parameter added to enable custom icons to be added without adding font-awesome prefixes
310	+
311	= 1.2.3 =
312
313	* Enable targeting the tab from url query string when the title contains an accent

355
356	== Upgrade Notice ==
357
358	+ = 1.3.1 =
359	+ * Fixed issue with the option value saving
360	+
361	+ = 1.3.0 =
362	+ * using target url parameter overrides open shortcode parameter for which tab is to be open on page load
363	+ * Shortcode parameters now used in array, not extracted
364	+ * Priority of tabbytrigger can be changed by adding 'priority' shortcode parameter with an appropriate value
365	+ * Priority of tabbytrigger changed to 30 by default to prevent breakage on pages created with gutenberg
366	+ * ico shortcode parameter added to enable custom icons to be added without adding font-awesome prefixes
367	+
368	= 1.2.3 =
369
370	* Enable targeting the tab from url query string when the title contains an accent

tabby-responsive-tabs.php CHANGED Viewed

	@@ -1,13 +1,15 @@
1	<?php
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.2.3
8	- ~~Author~~ ~~URI~~: ~~http://cubecolour~~.~~co.uk~~


9
10	- Tabby Responsive Tabs WordPress plugin Copyright 2013-~~2015~~ Michael Atkins
11
12	Licenced under the GNU GPL:
13
	@@ -52,41 +54,40 @@ Author URI: http://cubecolour.co.uk
52
53	*/
54
55	- // ~~==============================================~~
56	- // Prevent Direct Access of this file
57	- // ==============================================
58
59	- if ( ! defined( 'ABSPATH' ) ) exit; // Exit if this file is accessed directly
60
61	- ~~// ==============================================~~
62	- ~~// Get~~ ~~Plugin~~ ~~Version~~
63	- // ~~==============================================~~




64
65	- function cc_tabby_plugin_version() {
66	- if ~~( ! function_exists( 'get_plugins' ) )~~
67	- require_once( ABSPATH . 'wp-admin/includes/plugin.php' );
68	- $plugin_folder = get_plugins( '/' . plugin_basename( dirname( __FILE__ ) ) );
69	- $plugin_file = basename( ( __FILE__ ) );
70	- return $plugin_folder[$plugin_file]['Version'];
71	}
72
73	- ~~// ==============================================~~
74	- // Add Links in Plugins Table
75	- // ~~==============================================~~
76	-
77	add_filter( 'plugin_row_meta', 'cc_tabby_meta_links', 10, 2 );
78	function cc_tabby_meta_links( $links, $file ) {
79
80	$plugin = plugin_basename(__FILE__);
81
82	- // create the links
83	if ( $file == $plugin ) {
84
85	$supportlink = 'https://wordpress.org/support/plugin/tabby-responsive-tabs';
86	- $donatelink = '~~http~~://cubecolour.co.uk/wp';
87	$reviewlink = 'https://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs?rate=5#postform';
88	- $twitterlink = '~~http~~://twitter.com/cubecolour';
89	- $customiselink = '~~http~~://cubecolour.co.uk/tabby-responsive-tabs-customiser';


90	$iconstyle = 'style="-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"';
91
92	if ( is_plugin_active( 'tabby-responsive-tabs-customiser/tabby-customiser.php' ) ) {
	@@ -94,72 +95,58 @@ function cc_tabby_meta_links( $links, $file ) {
94	}
95
96	return array_merge( $links, array(
97	- '<a href="' . $supportlink . '"> <span class="dashicons dashicons-lightbulb" ' . $iconstyle . 'title="~~Tabby Responsive Tabs~~ Support"></span></a>',
98	- '<a href="' . $twitterlink . '"><span class="dashicons dashicons-twitter" ' . $iconstyle . 'title="Cubecolour on ~~Twitter~~"></span></a>',
99	- '<a href="' . $reviewlink . '"><span class="dashicons dashicons-star-filled"' . $iconstyle . 'title="Give a 5 ~~Star~~ ~~Review~~"></span></a>',
100	'<a href="' . $donatelink . '"><span class="dashicons dashicons-heart"' . $iconstyle . 'title="Donate"></span></a>',
101	- '<a href="' . $customiselink . '"><span class="dashicons dashicons-admin-appearance" ' . $iconstyle . 'title="Tabby ~~Responsive~~ ~~Tabs~~ ~~Customizer~~"></span></a>'

102	) );
103	}
104
105	return $links;
106	}
107
108	- // ==============================================
109	- //
110	- // Register & enqueue the stylesheet
111	- // If you want to use custom styles, copy the content of the tabby.css to your child theme
112	- // and stop the default styles from loading by this by adding the following line to the theme's functions.php or custom site functions plugin:
113	- //
114	- // remove_action('wp_print_styles', 'cc_tabby_css', 30);
115	- //
116	- // Alternatively use the tabby responsive tabs customiser plugin
117	- // available from from http:cubecolour.co.uk/tabby-responsive-tabs-customiser
118	- //
119	- // Note: wp_print_styles has been deprecated since WP v3.3, so in a future version of this plugin this may be replaced with:
120	- // add_action( 'wp_enqueue_scripts', 'cc_tabby_css' );
121	- // However not breaking backwards compatibility for existing users is currently more important
122	-
123	- // Print styles now added separately and only to pages with at least one tab group
124	- // ==============================================
125	-
126	- //Screen Styles
127	- function cc_tabby_css() {
128	- wp_register_style( 'tabby', plugins_url( '/css/tabby.css' , __FILE__ ), '', cc_tabby_plugin_version() );
129	- }
130	-
131	- add_action('wp_print_styles', 'cc_tabby_css', 30);
132
133	- ~~//Print Styles~~
134	- ~~function~~ ~~cc_tabby_register_print_css()~~ {
135	- ~~wp_register_style(~~ ~~'tabby-print', plugins_url( '/css/tabby-print.css' , __FILE__ ), '', cc_tabby_plugin_version() );~~



136	}
137
138	- ~~add_action('wp_enqueue_scripts', 'cc_tabby_register_print_css');~~
139	-
140	- // ~~==============================================~~
141	- // ~~Trigger~~ the ~~script~~ if it ~~has~~ ~~not~~ ~~already~~ ~~been~~ ~~triggered~~ on the page
142	- // ~~==============================================~~
143	-
144	- ~~function~~ ~~cc_tabbytrigger() {~~
145	-
146	- ~~static $tabbytriggered = FALSE; // static so only sets the value the first time it is run~~
147	-
148	- if ~~($tabbytriggered~~ == ~~FALSE)~~ {
149	- ~~echo~~ ~~"\n" . "<script>jQuery~~(~~document~~)~~.ready(function($)~~ { ~~RESPONSIVEUI.responsiveTabs(); })</script>" . "\n";~~
150	-
151	- ~~$tabbytriggered~~ = ~~TRUE~~;
152	- }




153	}

154
155	- // ==============================================
156	- // SHORTCODE FOR TABBY
157	- // use [tabby]
158	- // ==============================================
159





160	function cc_shortcode_tabby( $atts, $content = null ) {
161
162	- // initialise $firsttab flag so we can tell whether we are building the first tab
163
164	global $reset_firsttab_flag;
165	static $firsttab = TRUE;
	@@ -169,82 +156,88 @@ function cc_shortcode_tabby( $atts, $content = null ) {
169	$GLOBALS["reset_firsttab_flag"] = FALSE;
170	}
171
172	- // ~~extract~~ ~~title & whether open~~
173	- ~~extract(shortcode_atts(array(~~
174	- ~~"title"~~ => '',
175	- ~~"open"~~ => '',
176	- ~~"icon"~~ => '',
177	- ), ~~$atts~~, ~~'tabbytab'));~~

178
179	- $tabtarget = sanitize_title_with_dashes( remove_accents( wp_kses_decode_entities( $title ) ) );
180
181	- ~~//initialise~~ ~~urltarget~~


182	$urltarget = '';
183
184	- //grab the value of the 'target' url parameter if there is one
185	if ( isset ( $_REQUEST['target'] ) ) {
186	$urltarget = sanitize_title_with_dashes( $_REQUEST['target'] );
187	}
188
189	- // 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
190	$tabcontentclass = "tabcontent";
191
192	if ( isset( $class ) ) {
193	$tabcontentclass .= " " . $class . "-content";
194	}
195
196	- if ( ( $open ) \|\| ( isset( $urltarget ) && ( $urltarget == $tabtarget ) ) ) {
197	$tabcontentclass .= " responsive-tabs__panel--active";
198	}
199
200	- $addtabicon = '';
201
202	- if ( ~~$icon~~ ) {
203	- ~~$addtabicon~~ = '~~<span class="fa fa-~~' . ~~$icon . '"></span>';~~





204	}
205
206	- // test whether this is the first tab in the group
207	if ( $firsttab ) {
208
209	- // Set flag so we know subsequent tabs are not the first in the tab group
210	$firsttab = FALSE;
211
212	- // Build output if we are making the first tab
213	- return '<div class="responsive-tabs">' . "\n" . '<h2 class="tabtitle">' . $addtabicon . $title . '</h2>' . "\n" . '<div class="' . $tabcontentclass . '">' . "\n";
214	}
215
216	else {
217	- // Build output if we are making a non-first tab
218	- return "\n" . '</div><h2 class="tabtitle">' . $addtabicon . $title . '</h2>' . "\n" . '<div class="' . $tabcontentclass . '">' . "\n";
219	}
220	}

221
222	- add_shortcode('tabby', 'cc_shortcode_tabby');
223	-
224	- // ==============================================
225	- // SHORTCODE TO BE USED AFTER FINAL TABBY TAB
226	- // use [tabbyending]
227	- // ==============================================
228





229	function cc_shortcode_tabbyending( $atts, $content = null ) {
230
231	- // add screen & ~~print-~~only styles
232	- if ( ~~wp_style_is~~( '~~tabby~~', ~~$list~~ = '~~registered~~' ) ) {
233	wp_enqueue_style( 'tabby' );
234	}
235

236	wp_enqueue_style( 'tabby-print' );
237
238	- ~~wp_enqueue_script('tabby',~~ ~~plugins_url('js/tabby.js',~~ ~~__FILE__), array('jquery'), cc_tabby_plugin_version(), true);~~

239
240	- ~~add_action('wp_footer',~~ ~~'cc_tabbytrigger',~~ ~~20);~~

241
242	$GLOBALS["reset_firsttab_flag"] = TRUE;
243
244	- ~~global~~ ~~$cc_add_tabby_css~~;
245	- $cc_add_tabby_css = true;
246	-
247	- return '</div></div>';
248	}
249
250	- add_shortcode('tabbyending', 'cc_shortcode_tabbyending');


1	<?php
2	/*
3	Plugin Name: Tabby Responsive Tabs
4	+ Plugin URI: https://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.3.1
8	+ Requires at least: 5.0
9	+ Requires PHP: 5.6
10	+ Author URI: https://cubecolour.co.uk
11
12	+ Tabby Responsive Tabs WordPress plugin Copyright 2013-2022 Michael Atkins
13
14	Licenced under the GNU GPL:
15

54
55	*/
56
57	+ if ( ! defined( 'ABSPATH' ) ) exit;


58

59
60	+ /**
61	+ * Define Constants
62	+ *
63	+ */
64	+ define( 'CC_TABBY_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
65	+ define( 'CC_TABBY_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
66	+ define( 'CC_TABBY_PLUGIN_VERSION', '1.3.0' );
67
68	+ function cc_tabby_plugin_version(){
69	+ return CC_TABBY_PLUGIN_VERSION;




70	}
71
72	+ /**
73	+ * Add Links in Plugins Table
74	+ *
75	+ */
76	add_filter( 'plugin_row_meta', 'cc_tabby_meta_links', 10, 2 );
77	function cc_tabby_meta_links( $links, $file ) {
78
79	$plugin = plugin_basename(__FILE__);
80
81	+ //* create the links
82	if ( $file == $plugin ) {
83
84	$supportlink = 'https://wordpress.org/support/plugin/tabby-responsive-tabs';
85	+ $donatelink = 'https://cubecolour.co.uk/wp';
86	$reviewlink = 'https://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs?rate=5#postform';
87	+ $twitterlink = 'https://twitter.com/cubecolour';
88	+ $customiselink = 'https://cubecolour.co.uk/tabby-responsive-tabs-customiser';
89	+ $adminlink = admin_url( 'options-general.php?page=tabby-settings' );
90	+
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' ) ) {

95	}
96
97	return array_merge( $links, array(
98	+ '<a href="' . $supportlink . '"> <span class="dashicons dashicons-lightbulb" ' . $iconstyle . 'title="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 customiser"></span></a>',
103	+ '<a href="' . $adminlink . '"><span class="dashicons dashicons-admin-generic" ' . $iconstyle . 'title="Admin"></span></a>',
104	) );
105	}
106
107	return $links;
108	}
109
























110
111	+ /**
112	+ * Add the admin page if 'tabby responsive tabs customiser' is not active
113	+ *
114	+ */
115	+ if ( !function_exists( 'cc_remove_tabby_default_css' ) ) {
116	+ require_once( CC_TABBY_PLUGIN_PATH . 'includes/admin.php' );
117	}
118
119	+ /**
120	+ * Register & enqueue the stylesheet
121	+ * If you want to use custom styles, copy the content of the tabby.css to your child theme and edit the styles there
122	+ * Prevent the default styles from loading by deselecting the "Include default tab by stylesheet" checkbox in the tabby settings page at settings/tabby
123	+ * Alternatively use the tabby responsive tabs customiser plugin
124	+ * available from from https:cubecolour.co.uk/tabby-responsive-tabs-customiser
125	+ *
126	+ */
127	+
128	+
129	+ //* Register script & styles
130	+ function cc_tabby_register_cssjs() {
131	+ wp_register_style( 'tabby', CC_TABBY_PLUGIN_URL . 'css/tabby.css', '', CC_TABBY_PLUGIN_VERSION );
132	+ wp_register_style( 'tabby-print', CC_TABBY_PLUGIN_URL . 'css/tabby-print.css', '', CC_TABBY_PLUGIN_VERSION, 'print' );
133	+ wp_register_script( 'tabby', CC_TABBY_PLUGIN_URL . 'js/tabby.js', array('jquery'), CC_TABBY_PLUGIN_VERSION, true );
134	+
135	+ //* inline script added at tabbyending
136	+ $tabbytrigger = "jQuery(document).ready(function($) { RESPONSIVEUI.responsiveTabs(); })";
137	+ wp_add_inline_script( 'tabby', $tabbytrigger );
138	}
139	+ add_action( 'wp_enqueue_scripts', 'cc_tabby_register_cssjs' );
140




141
142	+ /**
143	+ * SHORTCODE FOR TABBY
144	+ * use [tabby]
145	+ *
146	+ */
147	function cc_shortcode_tabby( $atts, $content = null ) {
148
149	+ //* initialise $firsttab flag so we can tell whether we are building the first tab
150
151	global $reset_firsttab_flag;
152	static $firsttab = TRUE;

156	$GLOBALS["reset_firsttab_flag"] = FALSE;
157	}
158
159	+ $args = shortcode_atts( array(
160	+ 'title' => '',
161	+ 'open' => '',
162	+ 'icon' => '',
163	+ 'ico' => '',
164	+ 'required' => FALSE,
165	+ ), $atts );
166

167
168	+ $tabtarget = sanitize_title_with_dashes( remove_accents( wp_kses_decode_entities( $args['title'] ) ) );
169	+
170	+ //* initialise urltarget
171	$urltarget = '';
172
173	+ //* grab the value of the 'target' url parameter if there is one
174	if ( isset ( $_REQUEST['target'] ) ) {
175	$urltarget = sanitize_title_with_dashes( $_REQUEST['target'] );
176	}
177
178	+ //* 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
179	$tabcontentclass = "tabcontent";
180
181	if ( isset( $class ) ) {
182	$tabcontentclass .= " " . $class . "-content";
183	}
184
185	+ if ( ( ( $args['open'] ) && ( $urltarget == '' ) ) \|\| ( isset( $urltarget ) && ( $urltarget == $tabtarget ) ) ) {
186	$tabcontentclass .= " responsive-tabs__panel--active";
187	}
188

189
190	+ //* Add span for icon if icon (font-awesome) or ico (non-autoprefixed) is present
191	+ if ( $args['icon'] ) {
192	+ $addtabicon = '<span class="fa fa-' . sanitize_html_class( $args['icon'] ) . '"></span>';
193	+ } elseif ( $args['ico'] ) {
194	+ $addtabicon = '<span class="' . sanitize_html_class( $ico ) . '"></span>';
195	+ } else {
196	+ $addtabicon = '';
197	}
198
199	+ //* test whether this is the first tab in the group
200	if ( $firsttab ) {
201
202	+ //* Set flag so we know subsequent tabs are not the first in the tab group
203	$firsttab = FALSE;
204
205	+ //* Build output if we are making the first tab
206	+ return '<div class="responsive-tabs">' . "\n" . '<h2 class="tabtitle">' . $addtabicon . sanitize_text_field( $args['title'] ) . '</h2>' . "\n" . '<div class="' . sanitize_text_field( $tabcontentclass ) . '">' . "\n";
207	}
208
209	else {
210	+ //* Build output if we are making a non-first tab
211	+ return "\n" . '</div><h2 class="tabtitle">' . $addtabicon . sanitize_text_field( $args['title'] ) . '</h2>' . "\n" . '<div class="' . sanitize_text_field( $tabcontentclass ) . '">' . "\n";
212	}
213	}
214	+ add_shortcode( 'tabby', 'cc_shortcode_tabby' );
215






216
217	+ /**
218	+ * SHORTCODE TO BE USED AFTER FINAL TABBY TAB
219	+ * use [tabbyending]
220	+ *
221	+ */
222	function cc_shortcode_tabbyending( $atts, $content = null ) {
223
224	+ //* add screen styles, but only if the customiser or a custom styles plugin is not active
225	+ if ( ( !function_exists( 'cc_remove_tabby_default_css' ) ) && ( !function_exists( 'cc_remove_tabby_default_style' ) ) && ( 1 == get_option( 'cc_tabby_default_styles' ) ) ) {
226	wp_enqueue_style( 'tabby' );
227	}
228
229	+ //* Add print-only styles
230	wp_enqueue_style( 'tabby-print' );
231
232	+ //* Add script
233	+ wp_enqueue_script( 'tabby' );
234
235	+ //* action hook to add custom styles etc
236	+ do_action( 'cc_tabby' );
237
238	$GLOBALS["reset_firsttab_flag"] = TRUE;
239
240	+ return '</div></div>' . ( get_option( 'cc_tabby_default_styles' ) ) ;



241	}
242
243	+ add_shortcode( 'tabbyending', 'cc_shortcode_tabbyending' );