Tabby Responsive Tabs - Version 1.0.0

Version Description

  • Initial Version

=

Download this release

Release Info

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

Version 1.0.0

Files changed (4) hide show
  1. css/responsive-tabs.css +60 -0
  2. js/responsiveTabs.js +202 -0
  3. readme.txt +123 -0
  4. tabby-responsive-tabs.php +162 -0
css/responsive-tabs.css ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @media (max-width: 767px) {
2
+ .tab-list { display: none;}
3
+ .tabs.enabled .tab-heading { cursor:pointer; }
4
+ .tabs.enabled .tab-heading.active-tab-heading { cursor: default; }
5
+ .hidden-mobile { display: none;}
6
+ }
7
+
8
+ @media (min-width: 768px) {
9
+ .tabs.enabled .tab-heading { display: none;}
10
+ .tab-list li { display: inline; cursor:pointer;}
11
+ .hidden-mobile { display: block !important;}
12
+ }
13
+
14
+ /* END - Required for core functionality of tab.js */
15
+
16
+
17
+
18
+ /* OPTIONAL - Basic Skin */
19
+
20
+ .tab-panel { margin-bottom:50px;}
21
+ .tabs.enabled .tab-heading:focus,
22
+ .tabs.enabled .tab-list { margin-left: 0!important; }
23
+ .tabs.enabled .tab-list li:focus { outline: 1px solid #ccc; }
24
+ .tabs.enabled .tab-heading.active-tab-heading:focus,
25
+ .tabs.enabled .tab-list li.active-tab:focus { outline: none !important;}
26
+
27
+
28
+ @media (max-width: 767px) {
29
+ .tabs.enabled .tab-heading {
30
+ padding: 0.5em; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
31
+ background: #ddd;
32
+ position: relative;
33
+ }
34
+
35
+ .tabs.enabled .tab-heading:after {
36
+ content:"";
37
+ display: block;
38
+ position: absolute;
39
+ right: 20px;
40
+ top: 40%;
41
+ width: 0px;
42
+ height: 0px;
43
+ border-left: 10px solid transparent;
44
+ border-right: 10px solid transparent;
45
+ border-top: 10px solid #000;
46
+ }
47
+ .tabs.enabled .tab-heading:hover,
48
+ .tabs.enabled .tab-heading.active-tab-heading:hover { background-color: #efefef}
49
+ .tabs.enabled .tab-heading.active-tab-heading { background: #fff;}
50
+ .tabs.enabled .tab-heading.active-tab-heading:after { border-bottom: 10px solid #000; border-top:0; }
51
+ }
52
+
53
+ @media (min-width: 768px) {
54
+ .tabs.enabled .tab-list { margin: 20px 0 0 0; border-bottom: 1px solid #ddd; padding: 7px;}
55
+ .tabs.enabled .tab-list li.tab { background: #eee; line-height: 1; font-size: 18px; padding: 10px 20px 6px; margin: 0 10px 0; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #ddd; }
56
+ .tabs.enabled .tab-list li.tab:hover { background: #ddd; }
57
+ .tabs.enabled .tab-list li.tab.active-tab { background: #fff; border-bottom-color: #fff;}
58
+ }
59
+
60
+ /* END - Optional - Basic Skin */
js/responsiveTabs.js ADDED
@@ -0,0 +1,202 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* ----------------
2
+ ResponsiveTabs.js
3
+ Author: Pete Love | www.petelove.com
4
+ Version: 1.5
5
+ ------------------- */
6
+
7
+ var RESPONSIVEUI = {};
8
+
9
+ (function($) {
10
+
11
+ RESPONSIVEUI.responsiveTabs = function () {
12
+ if (!$('.tabs').hasClass('enabled')) { // if we haven't already enabled tabs
13
+ $('.tabs').addClass('enabled'); // used to style tabs if JS is present
14
+
15
+ //loop through all sets of tabs on the page
16
+ var tablistcount = 1;
17
+
18
+ $('.tabs').each(function() {
19
+
20
+ var $tabs = $(this);
21
+
22
+ // add tab heading and tab panel classes
23
+ $tabs.children('h1,h2,h3,h4,h5,h6').addClass('tab-heading');
24
+ $tabs.children('div').addClass('tab-panel');
25
+
26
+ // determine if markup already identifies the active tab panel for this set of tabs
27
+ // if not then set first heading and tab to be the active one
28
+ var $activePanel = $tabs.find('.active-panel');
29
+ if(!$activePanel.length) {
30
+ var $activePanel = $tabs.find('.tab-panel').first().addClass('active-panel');
31
+ }
32
+
33
+ $tabs.find('.tab-panel').not('.active-panel').hide().attr('aria-hidden','true'); //hide all except active panel
34
+ $activePanel.attr('aria-hidden', 'false');
35
+ /* make active tab panel hidden for mobile */
36
+ $activePanel.addClass('hidden-mobile');
37
+
38
+ // wrap tabs in container - to be dynamically resized to help prevent page jump
39
+ var $tabsWrapper = $('<div/>', { class: 'tabs-wrapper' });
40
+ $tabs.wrap($tabsWrapper);
41
+
42
+ var highestHeight = 0;
43
+
44
+ // determine height of tallest tab panel. Used later to prevent page jump when tabs are clicked
45
+ $tabs.find('.tab-panel').each(function() {
46
+ var tabHeight = $(this).height();
47
+ if (tabHeight > highestHeight) {
48
+ highestHeight = tabHeight;
49
+ }
50
+ })
51
+
52
+ //create the tab list
53
+ var $tabList = $('<ul/>', { class: 'tab-list', 'role': 'tablist' });
54
+
55
+ //loop through each heading in set
56
+ var tabcount = 1;
57
+ $tabs.find('.tab-heading').each(function() {
58
+
59
+ var $tabHeading = $(this);
60
+ var $tabPanel = $(this).next();
61
+
62
+ $tabHeading.attr('tabindex', 0);
63
+
64
+ // CREATE TAB ITEMS (VISIBLE ON DESKTOP)
65
+ //create tab list item from heading
66
+ //associate tab list item with tab panel
67
+ var $tabListItem = $('<li/>', {
68
+ class: 'tab',
69
+ id: 'tablist' + tablistcount + '-tab' + tabcount,
70
+ 'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
71
+ 'role': 'tab',
72
+ tabindex: 0,
73
+ text: $tabHeading.text(),
74
+ keydown: function (objEvent) {
75
+ if (objEvent.keyCode == 13) { // if user presses 'enter'
76
+ $tabListItem.click();
77
+ }
78
+ },
79
+ click: function() {
80
+ //Show associated panel
81
+
82
+ //set height of tab container to highest panel height to avoid page jump
83
+ $tabsWrapper.css('height', highestHeight);
84
+
85
+ // remove hidden mobile class from any other panel as we'll want that panel to be open at mobile size
86
+ $tabs.find('.hidden-mobile').removeClass('hidden-mobile');
87
+
88
+ // close current panel and remove active state from its (hidden on desktop) heading
89
+ $tabs.find('.active-panel').toggle().removeClass('active-panel').attr('aria-hidden','true').prev().removeClass('active-tab-heading');
90
+
91
+ //make this tab panel active
92
+ $tabPanel.toggle().addClass('active-panel').attr('aria-hidden','false');
93
+
94
+ //make the hidden heading active
95
+ $tabHeading.addClass('active-tab-heading');
96
+
97
+ //remove active state from currently active tab list item
98
+ $tabList.find('.active-tab').removeClass('active-tab');
99
+
100
+ //make this tab active
101
+ $tabListItem.addClass('active-tab');
102
+
103
+ //reset height of tab panels to auto
104
+ $tabsWrapper.css('height', 'auto');
105
+ }
106
+ });
107
+
108
+ //associate tab panel with tab list item
109
+ $tabPanel.attr({
110
+ 'role': 'tabpanel',
111
+ 'aria-labelledby': $tabListItem.attr('id'),
112
+ id: 'tablist' + tablistcount + '-panel' + tabcount
113
+ });
114
+
115
+ // if this is the active panel then make it the active tab item
116
+ if($tabPanel.hasClass('active-panel')) {
117
+ $tabListItem.addClass('active-tab');
118
+ }
119
+
120
+ // add tab item
121
+ $tabList.append($tabListItem);
122
+
123
+
124
+
125
+
126
+ // TAB HEADINGS (VISIBLE ON MOBILE)
127
+ // if user presses 'enter' on tab heading trigger the click event
128
+ $tabHeading.keydown(function(objEvent) {
129
+ if (objEvent.keyCode == 13) {
130
+ $tabHeading.click();
131
+ }
132
+ })
133
+
134
+ //toggle tab panel if click heading (on mobile)
135
+ $tabHeading.click(function() {
136
+
137
+ // remove any hidden mobile class
138
+ $tabs.find('.hidden-mobile').removeClass('hidden-mobile');
139
+
140
+ // if this isn't currently active
141
+ if (!$tabHeading.hasClass('active-tab-heading')){
142
+ //get position of active heading
143
+ if($('.active-tab-heading').length) {
144
+ var oldActivePos = $('.active-tab-heading').offset().top;
145
+ }
146
+
147
+ // close currently active panel and remove active state from any hidden heading
148
+ $tabs.find('.active-panel').slideToggle().removeClass('active-panel').prev().removeClass('active-tab-heading');
149
+
150
+ //close all tabs
151
+ $tabs.find('.tab-panel').hide().attr('aria-hidden','true');
152
+
153
+ //open this panel
154
+ $tabPanel.slideToggle().addClass('active-panel').attr('aria-hidden','false');
155
+
156
+ // make this heading active
157
+ $tabHeading.addClass('active-tab-heading');
158
+
159
+ var $currentActive = $tabs.find('.active-tab');
160
+
161
+ //set the active tab list item (for desktop)
162
+ $currentActive.removeClass('active-tab');
163
+ var panelId = $tabPanel.attr('id');
164
+ var tabId = panelId.replace('panel','tab');
165
+ $('#' + tabId).addClass('active-tab');
166
+
167
+ //scroll to active heading only if it is below previous one
168
+ var tabsPos = $('.tabs').offset().top;
169
+ var newActivePos = $('.active-tab-heading').offset().top;
170
+ if(oldActivePos < newActivePos) {
171
+ $('html, body').animate({ scrollTop: tabsPos }, 0).animate({ scrollTop: newActivePos }, 400);
172
+ }
173
+
174
+ }
175
+
176
+ // if this tab panel is already active
177
+ else {
178
+
179
+ // hide panel but give it special hidden-mobile class so that it can be visible at desktop size
180
+ $tabPanel.removeClass('active-panel').slideToggle(function () { $(this).addClass('hidden-mobile') });
181
+
182
+ //remove active heading class
183
+ $tabHeading.removeClass('active-tab-heading');
184
+
185
+ //don't alter classes on tabs as we want it active if put back to desktop size
186
+ }
187
+
188
+ })
189
+
190
+ tabcount ++;
191
+
192
+ })
193
+
194
+ // add finished tab list to its container
195
+ $tabs.prepend($tabList);
196
+
197
+ // next set of tabs on page
198
+ tablistcount ++;
199
+ })
200
+ }
201
+ }
202
+ })(jQuery);
readme.txt ADDED
@@ -0,0 +1,123 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Tabby Responsive Tabs ===
2
+ Contributors: numeeja
3
+ Donate link: http://cubecolour.co.uk/wp
4
+ Tags: tabs, responsive,
5
+ Requires at least: 3.7
6
+ Tested up to: 3.7.1
7
+ Stable tag: 1.0.0
8
+ License: GPLv2
9
+
10
+ Tabby enables you to create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes inside the post editor. The tabs turn into an accordion on a viewport 767px wide or less.
11
+
12
+ == Description ==
13
+
14
+ * Adds a Horizontal Tabbed interface which changes to Accordion when the viewport width is 767px or less
15
+ * Tabs and accordion are created with jQuery
16
+ * Supports multiple sets of tabs on same page
17
+ * Uses Semantic header and Content markup
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
+ Where tabname is the title of your tab.
28
+
29
+ Add the tab content after the `[tabby]` shortcode.
30
+
31
+ After the content of the last tab in a tabgroup use a `[tabbyending]` shortcode.
32
+
33
+ **note:** it is important to have a `[tabbyending]`
34
+
35
+ = Example =
36
+ `
37
+ [tabby title="First Tab"]
38
+ Kitty ipsum dolor sit amet, sunbathe dolor mauris a tristique, feed me nullam stuck in a tree ac faucibus bibendum libero. Jump on the table accumsan et vestibulum fluffy fur libero.
39
+
40
+ [tabby title="Second Tab"]
41
+ Lay down in your way catnip stuck in a tree iaculis, sunbathe orci turpis kittens scratched dolor quis nunc. Vestibulum cras nec attack sniff eat, tempus enim ut adipiscing scratched orci turpis give me fish.
42
+
43
+ [tabby title="Third Tab"]
44
+ Jump sleep in the sink vestibulum climb the curtains attack, sleep on your face sniff attack your ankles etiam give me fish judging you. Sagittis run zzz jump elit nibh, sunbathe enim rip the couch vulputate accumsan.
45
+
46
+ [tabbyending]
47
+ `
48
+
49
+
50
+ == Installation ==
51
+
52
+ 1. Upload the plugin folder to your '/wp-content/plugins/' directory
53
+ 1. Activate the plugin through the 'Plugins' menu in WordPress
54
+ 1. Add the shortcodes to your content
55
+ `
56
+ [tabby title="First Tab"]
57
+ Kitty ipsum dolor sit amet, sunbathe dolor mauris a tristique, feed me nullam stuck in a tree ac faucibus bibendum libero. Jump on the table accumsan et vestibulum fluffy fur libero.
58
+
59
+ [tabby title="Second Tab"]
60
+ Lay down in your way catnip stuck in a tree iaculis, sunbathe orci turpis kittens scratched dolor quis nunc. Vestibulum cras nec attack sniff eat, tempus enim ut adipiscing scratched orci turpis give me fish.
61
+
62
+ [tabby title="Third Tab"]
63
+ Jump sleep in the sink vestibulum climb the curtains attack, sleep on your face sniff attack your ankles etiam give me fish judging you. Sagittis run zzz jump elit nibh, sunbathe enim rip the couch vulputate accumsan.
64
+
65
+ [tabbyending]
66
+ `
67
+
68
+ == Frequently Asked Questions ==
69
+
70
+ = Where is the plugin's admin page? =
71
+
72
+ There isn't one. This is a lightweight plugin with no selectable options, so there is no need for an admin page.
73
+
74
+ = Is it responsive? =
75
+
76
+ Yes - it defaults to 100% of the width of the enclosing element.
77
+
78
+ = How can I change the colours? =
79
+
80
+ 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.
81
+
82
+ = OK I've done that, now how do I stop the default styles from loading? =
83
+
84
+ 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:
85
+
86
+ `<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>`
87
+
88
+ = Can I display multiple tab groups on a single page? =
89
+
90
+ Yes you can. As many as you like.
91
+
92
+ = Can you create a customised stylesheet for me to fit in with the colours of my website? =
93
+
94
+ I'd love to, but my time is limited and this is beyond of the scope of the free support that I can give on the forums, I can offer this as a paid service. Please send me details of your requirements via the [cubecolour contact form](http://cubecolour.co.uk/contact/ "cubecolour contact form").
95
+
96
+ = Why do you spell the word 'colour' incorrectly? =
97
+
98
+ I don't, I'm from England.
99
+
100
+ = I am using the plugin and I love it, how can I show my appreciation? =
101
+
102
+ You can donate via [my donation page](http://cubecolour.co.uk/wp/ "cubecolour donation page")
103
+
104
+ If you find the plugin useful I would also appreciate a glowing five star reviews on the [plugin review page](http://wordpress.org/support/view/plugin-reviews/tabby-reponsive-tabs/ "Tabby Responsive Tabs plugin reviews")
105
+
106
+ If it isn't working for you, please read the documentation carefully. If it doesn't address your issue, post a question on the [plugin support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs" Tabby Responsive Tabs plugin support forum") so we can at least have an opportunity to try to get it working before you leave a review.
107
+
108
+ == Screenshots ==
109
+
110
+ 1. On a desktop browser the content is displayed within a tabbed interface.
111
+ 2. When the browser width is below the size set in the media query, the tabs are replaced by an accordion interface.
112
+
113
+ == Changelog ==
114
+
115
+ = 1.0.0 =
116
+
117
+ * Initial Version
118
+
119
+ == Upgrade Notice ==
120
+
121
+ = 1.0.0 =
122
+
123
+ * Initial Version
tabby-responsive-tabs.php ADDED
@@ -0,0 +1,162 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 post types by adding simple shortcodes inside the post editor. The tabs behave like an accordion on smaller screens.
6
+ Author: cubecolour
7
+ Version: 1.0.0
8
+ Author URI: http://cubecolour.co.uk
9
+
10
+ Tabby Responsive Tabs
11
+ WordPress plugin Copyright 2013 Michael Atkins
12
+
13
+ Licenced under the GNU GPL:
14
+
15
+ This program is free software; you can redistribute it and/or modify
16
+ it under the terms of the GNU General Public License as published by
17
+ the Free Software Foundation; either version 2 of the License, or
18
+ (at your option) any later version.
19
+
20
+ This program is distributed in the hope that it will be useful,
21
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
22
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
23
+ GNU General Public License for more details.
24
+
25
+ You should have received a copy of the GNU General Public License
26
+ along with this program; if not, write to the Free Software
27
+ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
28
+
29
+
30
+ Responsive Tabs jQuery script by Pete Love:
31
+ http://www.petelove.co.uk/responsiveTabs/
32
+ http://codepen.io/petelove666/pen/zbLna
33
+ MIT license: http://blog.codepen.io/legal/licensing/
34
+
35
+ Permission is hereby granted, free of charge, to any person
36
+ obtaining a copy of this software and associated documentation
37
+ files (the "Software"), to deal in the Software without restriction,
38
+ including without limitation the rights to use, copy, modify,
39
+ merge, publish, distribute, sublicense, and/or sell copies of
40
+ the Software, and to permit persons to whom the Software is
41
+ furnished to do so, subject to the following conditions:
42
+
43
+ The above copyright notice and this permission notice shall
44
+ be included in all copies or substantial portions of the Software.
45
+
46
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
47
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
48
+ OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
49
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
50
+ HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
51
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
52
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
53
+ DEALINGS IN THE SOFTWARE.
54
+
55
+ */
56
+
57
+ // ==============================================
58
+ // Add Links in Plugins Table
59
+ // ==============================================
60
+
61
+ add_filter( 'plugin_row_meta', 'cc_tabby_meta_links', 10, 2 );
62
+ function cc_tabby_meta_links( $links, $file ) {
63
+
64
+ $plugin = plugin_basename(__FILE__);
65
+
66
+ // create the links
67
+ if ( $file == $plugin ) {
68
+ return array_merge( $links, array( '<a href="http://cubecolour.co.uk/wp">Donate</a>', '<a href="http://twitter.com/cubecolour">cubecolour on Twitter</a>' ) );
69
+ }
70
+ return $links;
71
+ }
72
+
73
+ // ==============================================
74
+ // Register & enqueue the stylesheet
75
+ // If you want to use custom styles, copy the content of the tabby.css to your child theme
76
+ // and stop the default styles from loading by this by adding the following line to the theme's functions.php:
77
+ //
78
+ // remove_action('wp_print_styles', 'cc_tabby_css', 30);
79
+ // ==============================================
80
+
81
+ add_action('wp_print_styles', 'cc_tabby_css', 30);
82
+
83
+ function cc_tabby_css() {
84
+ wp_enqueue_style('tabby.css', plugin_dir_url(__FILE__).'css/' . 'responsive-tabs.css' , false, '1.0');
85
+ }
86
+
87
+ // ==============================================
88
+ // Register & enqueue the script
89
+ // ==============================================
90
+
91
+ add_action('wp_enqueue_scripts', 'cc_tabby_js');
92
+ function cc_tabby_js() {
93
+ wp_register_script( 'tabby', plugins_url() . "/" . basename(dirname(__FILE__)) . '/js/responsiveTabs.js', array('jquery'), '1.0.0', true );
94
+ wp_enqueue_script( 'tabby' );
95
+ }
96
+
97
+ // ==============================================
98
+ // Trigger the script if it has not already been triggered on the page
99
+ // ==============================================
100
+
101
+ function cc_tabbytrigger() {
102
+
103
+ static $tabbytriggered = FALSE;
104
+
105
+ if ($tabbytriggered == FALSE) {
106
+ echo "\n" . "<script>jQuery(document).ready(function($) { RESPONSIVEUI.responsiveTabs(); })</script>" . "\n";
107
+ $tabbytriggered = TRUE;
108
+ }
109
+ }
110
+
111
+ // ==============================================
112
+ // SHORTCODE FOR TABBY
113
+ // use [tabby]
114
+ // ==============================================
115
+
116
+ function cc_shortcode_tabby( $atts, $content = null ) {
117
+
118
+ // initialise $firsttab flag so we can tell whether we are building the first tab
119
+
120
+ global $reset_firsttab_flag;
121
+ static $firsttab = TRUE;
122
+
123
+ if ($GLOBALS["reset_firsttab_flag"] == TRUE) {
124
+ $firsttab = TRUE;
125
+ $GLOBALS["reset_firsttab_flag"] = FALSE;
126
+ }
127
+
128
+ // extract title
129
+ extract(shortcode_atts(array("title" => ''), $atts));
130
+
131
+ // test whether this is the first tab in the group
132
+ if ( $firsttab == TRUE) {
133
+
134
+ // Set flag so we know the next tab is not the first in the tab group
135
+ $firsttab = FALSE;
136
+ // Build output for the first tab
137
+ return '<div class="tabs"><h2 class="tabtitle">' . $title . '</h2><div><p>';
138
+ }
139
+
140
+ else {
141
+ // Build output for non-first tab(s)
142
+ return '</p></div><h2 class="tabtitle">' . $title . '</h2><div><p>';
143
+ }
144
+ }
145
+
146
+ add_shortcode('tabby', 'cc_shortcode_tabby');
147
+
148
+ // ==============================================
149
+ // SHORTCODE TO GO AFTER FINAL TABBY TAB
150
+ // use [endtabby]
151
+ // ==============================================
152
+ function cc_shortcode_tabbyending( $atts, $content = null ) {
153
+
154
+ add_action('wp_footer', 'cc_tabbytrigger', 5);
155
+
156
+ $GLOBALS["reset_firsttab_flag"] = TRUE;
157
+
158
+ return '</p></div></div>';
159
+ }
160
+
161
+ add_shortcode('tabbyending', 'cc_shortcode_tabbyending');
162
+