Accordion Shortcodes - Version 2.0

Version Description

  • NEW: Buttons in the editor to easily add shortcodes with various settings
  • NEW: Support for item IDs on accordion items and direct linking to a specific item
  • NEW: Change the entire semantic structure of your accordions by using definition lists
  • ENHANCED: Class added if JavaScript is disabled (so you can style your accordions differently if necessary)
  • ENHANCED: Each accordion now has its own unique ID (accordion-1, accordion-2...) so you can target each one on a page
  • FIXED: A few incredibly small bugs/annoyances

=

Download this release

Release Info

Developer philbuchanan
Plugin Icon 128x128 Accordion Shortcodes
Version 2.0
Comparing to
See all releases

Code changes from version 1.3.1 to 2.0

Files changed (14) hide show
  1. accordion-shortcodes.php +40 -32
  2. accordion.js +25 -7
  3. accordion.min.js +1 -1
  4. assets/screenshot-1.png +0 -0
  5. assets/screenshot-2.png +0 -0
  6. assets/screenshot-3.png +0 -0
  7. languages/default.po +6 -10
  8. readme.txt +54 -97
  9. tinymce/images/accordion-item.gif +0 -0
  10. tinymce/images/accordion-item.svg +12 -0
  11. tinymce/images/accordion.gif +0 -0
  12. tinymce/images/accordion.svg +13 -0
  13. tinymce/tinymce-plugin.js +148 -0
  14. tinymce/tinymce.php +37 -0
accordion-shortcodes.php CHANGED
@@ -2,21 +2,26 @@
2
  /**
3
  * Plugin Name: Accordion Shortcodes
4
  * Description: Adds a few shortcodes to allow for accordion dropdowns.
5
- * Version: 1.3.1
6
  * Author: Phil Buchanan
7
  * Author URI: http://philbuchanan.com
8
  */
9
 
 
 
10
  # Make sure to not redeclare the class
11
  if (!class_exists('Accordion_Shortcodes')) :
12
 
13
  class Accordion_Shortcodes {
14
 
 
15
  private $add_script = false;
16
- private $tag = 'h3';
17
 
18
- function __construct() {
 
 
19
 
 
20
  $basename = plugin_basename(__FILE__);
21
 
22
  # Load text domain
@@ -34,48 +39,43 @@ class Accordion_Shortcodes {
34
 
35
  # Add link to documentation
36
  add_filter("plugin_action_links_$basename", array($this, 'add_documentation_link'));
37
-
38
- }
39
-
40
- # Checks for boolean value
41
- private function parse_boolean($value) {
42
-
43
- return filter_var($value, FILTER_VALIDATE_BOOLEAN);
44
-
45
  }
46
 
47
  # Registers the minified accordion JavaScript file
48
  public function register_script() {
49
-
50
  $min = (defined('SCRIPT_DEBUG') && SCRIPT_DEBUG) ? '' : '.min';
51
- wp_register_script('accordion-shortcodes-script', plugins_url('accordion' . $min . '.js', __FILE__), array('jquery'), '1.3.1', true);
52
-
53
  }
54
 
55
  # Prints the minified accordion JavaScript file in the footer
56
  public function print_script() {
57
-
58
  # Check to see if shortcodes are used on page
59
  if (!$this -> add_script) return;
60
 
61
  wp_enqueue_script('accordion-shortcodes-script');
 
62
 
 
 
 
63
  }
64
 
65
  # Check for valid HTML tag
66
  private function check_html_tag($tag) {
67
-
68
  $tag = preg_replace('/\s/', '', $tag);
69
- $tags = array('h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div');
70
 
71
  if (in_array($tag, $tags)) return $tag;
72
- else return 'h3';
73
-
74
  }
75
 
76
  # Accordion wrapper shortcode
77
  public function accordion_shortcode($atts, $content = null) {
78
-
79
  # The shortcode is used on the page, so we'll need to load the JavaScript
80
  $this -> add_script = true;
81
 
@@ -85,11 +85,18 @@ class Accordion_Shortcodes {
85
  'openfirst' => false,
86
  'openall' => false,
87
  'clicktoclose' => false,
88
- 'scroll' => false
 
89
  ), $atts, 'accordion'));
90
 
91
- # Set global tag
92
- if ($tag) $this -> tag = $this -> check_html_tag($tag);
 
 
 
 
 
 
93
 
94
  # Set settings object (for use in JavaScript)
95
  $script_data = array(
@@ -101,36 +108,37 @@ class Accordion_Shortcodes {
101
  );
102
  wp_localize_script('accordion-shortcodes-script', 'accordionSettings', $script_data);
103
 
104
- return '<div class="accordion">' . do_shortcode($content) . '</div>';
105
-
 
 
106
  }
107
 
108
  # Accordion item shortcode
109
  public function accordion_item_shortcode($atts, $content = null) {
110
-
111
  extract(shortcode_atts(array(
112
  'title' => '',
 
113
  'tag' => ''
114
  ), $atts, 'accordion-item'));
115
 
116
- return sprintf('<%3$s class="accordion-title">%1$s</%3$s><div class="accordion-content">%2$s</div>',
117
- $title ? $title : '<span style="color:red;">' . __('Please enter a title attribute: [accordion-item title="Item title"]', 'accordion_shortcodes') . '</span>',
118
  do_shortcode($content),
119
- $tag ? $this -> check_html_tag($tag) : $this -> tag
 
 
120
  );
121
-
122
  }
123
 
124
  # Add documentation link on plugin page
125
  public function add_documentation_link($links) {
126
-
127
  array_push($links, sprintf('<a href="%s">%s</a>',
128
  'http://wordpress.org/plugins/accordion-shortcodes/',
129
  __('Documentation', 'accordion_shortcodes')
130
  ));
131
 
132
  return $links;
133
-
134
  }
135
 
136
  }
2
  /**
3
  * Plugin Name: Accordion Shortcodes
4
  * Description: Adds a few shortcodes to allow for accordion dropdowns.
5
+ * Version: 2.0
6
  * Author: Phil Buchanan
7
  * Author URI: http://philbuchanan.com
8
  */
9
 
10
+ require_once('tinymce/tinymce.php');
11
+
12
  # Make sure to not redeclare the class
13
  if (!class_exists('Accordion_Shortcodes')) :
14
 
15
  class Accordion_Shortcodes {
16
 
17
+ private $plugin_version = '2.0';
18
  private $add_script = false;
 
19
 
20
+ private $wrapper_tag = 'div';
21
+ private $title_tag = 'h3';
22
+ private $content_tag = 'div';
23
 
24
+ function __construct() {
25
  $basename = plugin_basename(__FILE__);
26
 
27
  # Load text domain
39
 
40
  # Add link to documentation
41
  add_filter("plugin_action_links_$basename", array($this, 'add_documentation_link'));
42
+
43
+ # Add buttons to editor
44
+ if (is_admin()) {
45
+ $Accordion_Shortcode_Tinymce_Extensions = new Accordion_Shortcode_Tinymce_Extensions;
46
+ }
 
 
 
47
  }
48
 
49
  # Registers the minified accordion JavaScript file
50
  public function register_script() {
 
51
  $min = (defined('SCRIPT_DEBUG') && SCRIPT_DEBUG) ? '' : '.min';
52
+ wp_register_script('accordion-shortcodes-script', plugins_url('accordion' . $min . '.js', __FILE__), array('jquery'), $this -> plugin_version, true);
 
53
  }
54
 
55
  # Prints the minified accordion JavaScript file in the footer
56
  public function print_script() {
 
57
  # Check to see if shortcodes are used on page
58
  if (!$this -> add_script) return;
59
 
60
  wp_enqueue_script('accordion-shortcodes-script');
61
+ }
62
 
63
+ # Checks for boolean value
64
+ private function parse_boolean($value) {
65
+ return filter_var($value, FILTER_VALIDATE_BOOLEAN);
66
  }
67
 
68
  # Check for valid HTML tag
69
  private function check_html_tag($tag) {
 
70
  $tag = preg_replace('/\s/', '', $tag);
71
+ $tags = array('h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'div');
72
 
73
  if (in_array($tag, $tags)) return $tag;
74
+ else return $this -> title_tag;
 
75
  }
76
 
77
  # Accordion wrapper shortcode
78
  public function accordion_shortcode($atts, $content = null) {
 
79
  # The shortcode is used on the page, so we'll need to load the JavaScript
80
  $this -> add_script = true;
81
 
85
  'openfirst' => false,
86
  'openall' => false,
87
  'clicktoclose' => false,
88
+ 'scroll' => false,
89
+ 'semantics' => ''
90
  ), $atts, 'accordion'));
91
 
92
+ # Set global HTML tag names
93
+ if ($semantics == 'dl') {
94
+ $this -> wrapper_tag = 'dl';
95
+ $this -> title_tag = 'dt';
96
+ $this -> content_tag = 'dd';
97
+ }
98
+
99
+ if ($tag) $this -> title_tag = $this -> check_html_tag($tag);
100
 
101
  # Set settings object (for use in JavaScript)
102
  $script_data = array(
108
  );
109
  wp_localize_script('accordion-shortcodes-script', 'accordionSettings', $script_data);
110
 
111
+ return sprintf('<%2$s class="accordion no-js">%1$s</%2$s>',
112
+ do_shortcode($content),
113
+ $this -> wrapper_tag
114
+ );
115
  }
116
 
117
  # Accordion item shortcode
118
  public function accordion_item_shortcode($atts, $content = null) {
 
119
  extract(shortcode_atts(array(
120
  'title' => '',
121
+ 'id' => '',
122
  'tag' => ''
123
  ), $atts, 'accordion-item'));
124
 
125
+ return sprintf('<%4$s class="accordion-title"%3$s>%1$s</%4$s><%5$s class="accordion-content">%2$s</%5$s>',
126
+ $title ? $title : '<span style="color:red;">' . __('Please enter a title attribute', 'accordion_shortcodes') . '</span>',
127
  do_shortcode($content),
128
+ $id ? ' id="' . $id . '"' : '',
129
+ $tag ? $this -> check_html_tag($tag) : $this -> title_tag,
130
+ $this -> content_tag
131
  );
 
132
  }
133
 
134
  # Add documentation link on plugin page
135
  public function add_documentation_link($links) {
 
136
  array_push($links, sprintf('<a href="%s">%s</a>',
137
  'http://wordpress.org/plugins/accordion-shortcodes/',
138
  __('Documentation', 'accordion_shortcodes')
139
  ));
140
 
141
  return $links;
 
142
  }
143
 
144
  }
accordion.js CHANGED
@@ -4,6 +4,7 @@
4
  var allTitles = $('.accordion-title'),
5
  allPanels = $('.accordion-content').hide(),
6
  firstPanel = $('.accordion-content:first-of-type'),
 
7
  duration = 250,
8
  settings = {
9
  // Set defaults
@@ -19,8 +20,15 @@
19
  settings = accordionSettings;
20
  }
21
 
22
- // Open the first or all accordion items
23
- if (settings.openAll) {
 
 
 
 
 
 
 
24
  allPanels.show();
25
  allTitles.addClass('open');
26
  }
@@ -31,10 +39,8 @@
31
 
32
  // Add event listener
33
  allTitles.click(function() {
34
-
35
  // Only open the item if item isn't already open
36
  if (!$(this).hasClass('open')) {
37
-
38
  // Close all accordion items
39
  if (settings.autoClose) {
40
  allPanels.slideUp(duration);
@@ -51,17 +57,29 @@
51
  }
52
  });
53
  $(this).addClass('open');
54
-
55
  }
56
  // If item is open, and click to close is set, close it
57
  else if (settings.clickToClose) {
58
-
59
  $(this).next().slideUp(duration);
60
  $(this).removeClass('open');
61
-
62
  }
 
63
  return false;
 
64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  });
66
 
67
  }(jQuery));
4
  var allTitles = $('.accordion-title'),
5
  allPanels = $('.accordion-content').hide(),
6
  firstPanel = $('.accordion-content:first-of-type'),
7
+ selectId = $(window.location.hash),
8
  duration = 250,
9
  settings = {
10
  // Set defaults
20
  settings = accordionSettings;
21
  }
22
 
23
+ // Remove no-js class if JavaScript is enabled
24
+ $('.accordion').removeClass('no-js');
25
+
26
+ // Should any accordions be opened on load?
27
+ if (selectId.length && selectId.hasClass('accordion-title')) {
28
+ selectId.addClass('open');
29
+ selectId.next().slideDown(duration);
30
+ }
31
+ else if (settings.openAll) {
32
  allPanels.show();
33
  allTitles.addClass('open');
34
  }
39
 
40
  // Add event listener
41
  allTitles.click(function() {
 
42
  // Only open the item if item isn't already open
43
  if (!$(this).hasClass('open')) {
 
44
  // Close all accordion items
45
  if (settings.autoClose) {
46
  allPanels.slideUp(duration);
57
  }
58
  });
59
  $(this).addClass('open');
 
60
  }
61
  // If item is open, and click to close is set, close it
62
  else if (settings.clickToClose) {
 
63
  $(this).next().slideUp(duration);
64
  $(this).removeClass('open');
 
65
  }
66
+
67
  return false;
68
+ });
69
 
70
+ // Listen for hash changes (in page jump links for accordions)
71
+ $(window).on('hashchange', function() {
72
+ selectId = $(window.location.hash);
73
+ if (selectId.length && selectId.hasClass('accordion-title')) {
74
+ allPanels.slideUp(duration);
75
+ allTitles.removeClass('open');
76
+ selectId.addClass('open');
77
+ selectId.next().slideDown(duration, function() {
78
+ $('html, body').animate({
79
+ scrollTop: $(this).prev().offset().top
80
+ }, duration);
81
+ });
82
+ }
83
  });
84
 
85
  }(jQuery));
accordion.min.js CHANGED
@@ -1 +1 @@
1
- !function(o){"use strict";var e=o(".accordion-title"),s=o(".accordion-content").hide(),n=o(".accordion-content:first-of-type"),t=250,i={autoClose:!0,openFirst:!1,openAll:!1,clickToClose:!1,scroll:!1};"undefined"!=typeof accordionSettings&&(i=accordionSettings),i.openAll?(s.show(),e.addClass("open")):i.openFirst&&(n.prev().addClass("open"),n.slideDown(t)),e.click(function(){return o(this).hasClass("open")?i.clickToClose&&(o(this).next().slideUp(t),o(this).removeClass("open")):(i.autoClose&&(s.slideUp(t),e.removeClass("open")),o(this).next().slideDown(t,function(){i.scroll&&o("html, body").animate({scrollTop:o(this).prev().offset().top},t)}),o(this).addClass("open")),!1})}(jQuery);
1
+ (function(e){"use strict";var t=e(".accordion-title"),n=e(".accordion-content").hide(),r=e(".accordion-content:first-of-type"),i=e(window.location.hash),s=250,o={autoClose:true,openFirst:false,openAll:false,clickToClose:false,scroll:false};if(typeof accordionSettings!=="undefined"){o=accordionSettings}e(".accordion").removeClass("no-js");if(i.length&&i.hasClass("accordion-title")){i.addClass("open");i.next().slideDown(s)}else if(o.openAll){n.show();t.addClass("open")}else if(o.openFirst){r.prev().addClass("open");r.slideDown(s)}t.click(function(){if(!e(this).hasClass("open")){if(o.autoClose){n.slideUp(s);t.removeClass("open")}e(this).next().slideDown(s,function(){if(o.scroll){e("html, body").animate({scrollTop:e(this).prev().offset().top},s)}});e(this).addClass("open")}else if(o.clickToClose){e(this).next().slideUp(s);e(this).removeClass("open")}return false});e(window).on("hashchange",function(){i=e(window.location.hash);if(i.length&&i.hasClass("accordion-title")){n.slideUp(s);t.removeClass("open");i.addClass("open");i.next().slideDown(s,function(){e("html, body").animate({scrollTop:e(this).prev().offset().top},s)})}})})(jQuery)
assets/screenshot-1.png ADDED
Binary file
assets/screenshot-2.png ADDED
Binary file
assets/screenshot-3.png ADDED
Binary file
languages/default.po CHANGED
@@ -1,28 +1,24 @@
1
  msgid ""
2
  msgstr ""
3
  "Project-Id-Version: Accordion Shortcodes\n"
4
- "POT-Creation-Date: 2014-04-21 15:59-0500\n"
5
- "PO-Revision-Date: 2014-04-21 15:59-0500\n"
6
  "Last-Translator: Phil Buchanan <info@philbuchanan.com>\n"
7
  "Language-Team: \n"
8
  "Language: en_CA\n"
9
  "MIME-Version: 1.0\n"
10
  "Content-Type: text/plain; charset=UTF-8\n"
11
  "Content-Transfer-Encoding: 8bit\n"
12
- "X-Generator: Poedit 1.5.7\n"
13
  "X-Poedit-KeywordsList: __;_e;_n:1,2;_x:1,2c;_ex:1,2c\n"
14
  "X-Poedit-Basepath: .\n"
15
  "Plural-Forms: nplurals=2; plural=n != 1;\n"
16
  "X-Poedit-SearchPath-0: ..\n"
17
 
18
- #: ../accordion-shortcodes.php:106
19
- msgid "Please enter a title attribute: [accordion-item title=\"Item title\"]"
20
  msgstr ""
21
 
22
- #: ../accordion-shortcodes.php:109
23
- msgid "Close"
24
- msgstr ""
25
-
26
- #: ../accordion-shortcodes.php:119
27
  msgid "Documentation"
28
  msgstr ""
1
  msgid ""
2
  msgstr ""
3
  "Project-Id-Version: Accordion Shortcodes\n"
4
+ "POT-Creation-Date: 2014-07-28 14:53-0500\n"
5
+ "PO-Revision-Date: 2014-07-28 14:53-0500\n"
6
  "Last-Translator: Phil Buchanan <info@philbuchanan.com>\n"
7
  "Language-Team: \n"
8
  "Language: en_CA\n"
9
  "MIME-Version: 1.0\n"
10
  "Content-Type: text/plain; charset=UTF-8\n"
11
  "Content-Transfer-Encoding: 8bit\n"
12
+ "X-Generator: Poedit 1.6.7\n"
13
  "X-Poedit-KeywordsList: __;_e;_n:1,2;_x:1,2c;_ex:1,2c\n"
14
  "X-Poedit-Basepath: .\n"
15
  "Plural-Forms: nplurals=2; plural=n != 1;\n"
16
  "X-Poedit-SearchPath-0: ..\n"
17
 
18
+ #: ../accordion-shortcodes.php:126
19
+ msgid "Please enter a title attribute"
20
  msgstr ""
21
 
22
+ #: ../accordion-shortcodes.php:138
 
 
 
 
23
  msgid "Documentation"
24
  msgstr ""
readme.txt CHANGED
@@ -5,7 +5,7 @@ Donate Link: http://philbuchanan.com/
5
  Tags: accordion, accordions, shortcodes
6
  Requires at least: 3.3
7
  Tested up to: 3.9
8
- Stable tag: 1.3.1
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
@@ -19,14 +19,17 @@ Adds a few shortcodes to allow for accordion drop-downs.
19
  = Features =
20
 
21
  * Adds two shortcodes for adding an accordion to your site
 
22
  * No default CSS added
23
  * Only adds JavaScript on pages that use the shortcodes
24
- * Set the HTML tag for the title element of each item (optional)
 
25
  * Open the first accordion item by default (optional)
26
  * Open all accordion items by default (optional)
27
  * Disable auto closing of accordion items (optional)
28
  * Manually close items by clicking the title again (optional)
29
  * Scroll page to title when it's clicked open (optional)
 
30
 
31
  = The Shortcodes =
32
 
@@ -76,7 +79,7 @@ This is most likely caused by a poorly coded theme. This plugin makes use of the
76
 
77
  = How can I change the look of the accordion? =
78
 
79
- No CSS is added by default to the accordion. The accodion should look fine with every theme.
80
 
81
  That said, you can change the looking of the accordion as long as you are comfortable with editing your theme's stylesheet. If you are familiar with that process, you can add some [CSS](http://wordpress.org/plugins/accordion-shortcodes/other_notes/#Other-Notes) to make the accordion look the way you want.
82
 
@@ -94,8 +97,8 @@ Here is some sample CSS to get you started if you want to customize the look and
94
 
95
  /* Accordion Styles */
96
  .accordion {
97
- border-bottom: 1px solid #dbdbdb;
98
- margin-bottom: 20px;
99
  }
100
  .accordion-title {
101
  border-top: 1px solid #dbdbdb;
@@ -108,6 +111,22 @@ Here is some sample CSS to get you started if you want to customize the look and
108
  .accordion-title.open {cursor: default;}
109
  .accordion-content {padding-bottom: 20px;}
110
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
111
  = Advanced Settings =
112
 
113
  There are a few advanced settings you can add to the opening accordion shortcode. The full shortcode, with all the default settings looks like this:
@@ -118,7 +137,7 @@ There are a few advanced settings you can add to the opening accordion shortcode
118
 
119
  **openfirst**: Sets whether the first accordion item is open by default. This setting will be overridden if **openall** is set to true. Set `openfirst="true/false"` on the opening accordion tag like this: `[accordion openfirst="true"]`. Default is `false`.
120
 
121
- **openall**: Sets whether all accordion items are open by default. It is recommened that this setting be used with **clicktoclose**. Set `openall="true/false"` on the opening accordion tag like this: `[accordion openall="true"]`. Default is `false`.
122
 
123
  **clicktoclose**: Sets whether clicking an open title closes it. Set `clicktoclose="true/false"` on the opening accordion tag like this: `[accordion clicktoclose="true"]`. Default is `false`.
124
 
@@ -126,108 +145,46 @@ There are a few advanced settings you can add to the opening accordion shortcode
126
 
127
  **tag**: Set the global HTML tag to use for all accordion titles. Set `tag="h2"` on the opening accordion tag like this: `[accordion tag="h2"]`. Default is `h3`.
128
 
129
- You can also set the HTML tag for the titles of each accordion item individually by adding `tag="tagname"` to each `[accordion-item]` shortcode. Make sure to **not** include the angle brackets around the tag name. Example: to use `<h2>` instead of the default `<h3>` tag: `[accordion-item title="Item title" tag="h2"]Item content[/accordion-item]`. Using a tag attribue on an individual accordion item will override the global setting. The list of valid tags is: h1, h2, h3, h4, h5, h6, p, span and div.
130
 
131
- = Issues/Suggestions =
132
-
133
- For bug reports or feature requests or if you'd like to contribute to the plugin you can check everything out on [Github](https://github.com/philbuchanan/Accordion-Shortcodes/).
134
-
135
- == Changelog ==
136
- = 1.3.1 =
137
- * Fixes an issue where an empty tag attribute would break the accordion
138
- * Tags are now checked against a list of valid HTML tags
139
-
140
- = 1.3 =
141
- * Added global HTML tag setting for accordion item titles
142
 
143
- = 1.2.4 =
144
- * Compatibility with WordPress 3.9
145
 
146
- = 1.2.3 =
147
- * Added the shortcode parameter when calling shortcode_atts()
148
 
149
- = 1.2.2 =
150
- * Added option to scroll page to title when it's clicked open
151
- * Added detection for SCRIPT_DEBUG to load minified JavaScript conditionally
152
 
153
- = 1.2.1 =
154
- * Added option to open all items by default
155
-
156
- = 1.2 =
157
- * Fixed a potential error with headers already being sent
158
- * Fixed an issue with the SVN repo
159
- * Code cleanup
160
 
161
- = 1.1.1 =
162
- * Added link to documentation from plugins page
163
- * Added FAQs to readme
164
 
165
- = 1.1 =
166
- * **WARNING**: This update makes HTML structure changes and will require changes to your CSS
167
- * New HTML structure, based on class names
168
- * HTML now validates properly
169
- * Added localization support for error messages
170
 
171
- = 1.0.4 =
172
- * Added option to close an open item by clicking the title
173
 
174
- = 1.0.3 =
175
- * Added option to open the first item by default
176
- * Fixed an issue where clicking an already open item will close and reopen it
177
- * Added better inline documentation
178
- * Added minified JavaScript file
179
 
180
- = 1.0.2 =
181
- * Added setting to disable auto closing of accordion items
182
- * Better handling of accordion items with no title attribute set
183
- * Updated minimum WordPress version requirement (should still work down to 2.8, but not supported)
184
 
185
- = 1.0.1 =
186
- * Checks if the class exists before trying to create it
187
- * Updated readme
188
 
189
- = 1.0 =
190
- * Initial release
 
 
 
 
 
 
191
 
192
  == Upgrade Notice ==
193
- = 1.3.1 =
194
- IMPORTANT: Tags are now checked against a list of valid HTML tags. If you use a tag other than h1, h2, h3, h4, h5, h6, p, span or div for your titles, please let me know. You will want to avoid this update until I add your tag to the list. This update also fixes an issue where an empty tag attribute would break the accordion.
195
-
196
- = 1.3 =
197
- Added global HTML tag setting for accordion item titles.
198
-
199
- = 1.2.4 =
200
- Compatibility with WordPress 3.9.
201
-
202
- = 1.2.3 =
203
- Added the shortcode parameter when calling shortcode_atts().
204
-
205
- = 1.2.2 =
206
- Added option to scroll page to title when it's clicked open (useful if your accordion items contain a lot of content).
207
-
208
- = 1.2.1 =
209
- Added option to open all items by default.
210
-
211
- = 1.2 =
212
- General code cleanup and bug fixes.
213
-
214
- = 1.1.1 =
215
- Added a link to plugin documentation from the plugins page for easy access.
216
-
217
- = 1.1 =
218
- **WARNING**: This update makes HTML structure changes and will require changes to your CSS.
219
-
220
- = 1.0.4 =
221
- Added an option to close an item by clicking the title.
222
-
223
- = 1.0.3 =
224
- Added an option to open the first item by default. Fixed a bug that caused open items to close and reopen when clicking them.
225
-
226
- = 1.0.2 =
227
- Added an option to disable auto closing of accordion items.
228
-
229
- = 1.0.1 =
230
- Minor code updates.
231
-
232
- = 1.0 =
233
- Initial release.
5
  Tags: accordion, accordions, shortcodes
6
  Requires at least: 3.3
7
  Tested up to: 3.9
8
+ Stable tag: 2.0
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
11
 
19
  = Features =
20
 
21
  * Adds two shortcodes for adding an accordion to your site
22
+ * Two buttons in the TinyMCE editor make it easy to add and configure the accordion shortcodes
23
  * No default CSS added
24
  * Only adds JavaScript on pages that use the shortcodes
25
+ * Support for item IDs and direct links
26
+ * Set the HTML tag for the title element (optional)
27
  * Open the first accordion item by default (optional)
28
  * Open all accordion items by default (optional)
29
  * Disable auto closing of accordion items (optional)
30
  * Manually close items by clicking the title again (optional)
31
  * Scroll page to title when it's clicked open (optional)
32
+ * Change the semantic structure of your accordions (optional, advanced)
33
 
34
  = The Shortcodes =
35
 
79
 
80
  = How can I change the look of the accordion? =
81
 
82
+ No CSS is added by default to the accordion. The accordion should look fine with every theme.
83
 
84
  That said, you can change the looking of the accordion as long as you are comfortable with editing your theme's stylesheet. If you are familiar with that process, you can add some [CSS](http://wordpress.org/plugins/accordion-shortcodes/other_notes/#Other-Notes) to make the accordion look the way you want.
85
 
97
 
98
  /* Accordion Styles */
99
  .accordion {
100
+ border-bottom: 1px solid #dbdbdb;
101
+ margin-bottom: 20px;
102
  }
103
  .accordion-title {
104
  border-top: 1px solid #dbdbdb;
111
  .accordion-title.open {cursor: default;}
112
  .accordion-content {padding-bottom: 20px;}
113
 
114
+ = Opening an Accordion Via ID =
115
+
116
+ You can optionally add a unique ID to each of your accordion items and then use that ID in the URL to open that item by default. For example, say you have the following accordions:
117
+
118
+ [accordion]
119
+ [accordion-item id="item-1" title="Title of accordion item"]Drop-down content goes here.[/accordion-item]
120
+ [accordion-item id="item-2" title="Second accordion item"]Drop-down content goes here.[/accordion-item]
121
+ [accordion-item id="item-3" title="A Third accordion"]Drop-down content goes here.[/accordion-item]
122
+ [/accordion]
123
+
124
+ You could use this URL to open the third item by default:
125
+
126
+ http://yourdomain.com/your/path/#item-3
127
+
128
+ All you need to do is ensure that the part after the `#` in the URL matches the ID set on the accordion item.
129
+
130
  = Advanced Settings =
131
 
132
  There are a few advanced settings you can add to the opening accordion shortcode. The full shortcode, with all the default settings looks like this:
137
 
138
  **openfirst**: Sets whether the first accordion item is open by default. This setting will be overridden if **openall** is set to true. Set `openfirst="true/false"` on the opening accordion tag like this: `[accordion openfirst="true"]`. Default is `false`.
139
 
140
+ **openall**: Sets whether all accordion items are open by default. It is recommended that this setting be used with **clicktoclose**. Set `openall="true/false"` on the opening accordion tag like this: `[accordion openall="true"]`. Default is `false`.
141
 
142
  **clicktoclose**: Sets whether clicking an open title closes it. Set `clicktoclose="true/false"` on the opening accordion tag like this: `[accordion clicktoclose="true"]`. Default is `false`.
143
 
145
 
146
  **tag**: Set the global HTML tag to use for all accordion titles. Set `tag="h2"` on the opening accordion tag like this: `[accordion tag="h2"]`. Default is `h3`.
147
 
148
+ You can also set the HTML tag for the titles of each accordion item individually by adding `tag="tagname"` to each `[accordion-item]` shortcode. Make sure to **not** include the angle brackets around the tag name. Example: to use `<h2>` instead of the default `<h3>` tag: `[accordion-item title="Item title" tag="h2"]Item content[/accordion-item]`. Using a tag attribute on an individual accordion item will override the global setting. The list of valid tags is: h1, h2, h3, h4, h5, h6, p, div.
149
 
150
+ **semantics**: You can change the entire semantic structure of the accordions to use a definition list (dl, dt, dd) by setting `semantics="dl"` on the opening accordion tag like this: `[accordion semantics="dl"]`. By default the accordion will use `div` tags for the wrapper and content containers. If you set this option to `dl`, it is recommended that you do not also use the `tag` option. This feature is not selectable from the accordion button dialog box and must be added manually.
 
 
 
 
 
 
 
 
 
 
151
 
152
+ = Filtering Shortcodes =
 
153
 
154
+ You can filter the settings and content of the shortcodes by adding some simply code to the functions.php file of your theme.
 
155
 
156
+ For example, you could set the `openfirst` option for all accordions across the entire site using:
 
 
157
 
158
+ add_filter('shortcode_atts_accordion', 'set_accordion_shortcode_defaults', 10, 3);
159
+ function set_accordion_shortcode_defaults($atts) {
160
+ // Override the openfirst setting here
161
+ $atts['openfirst'] = true;
162
+ return $atts;
163
+ }
 
164
 
165
+ = Issues/Suggestions =
 
 
166
 
167
+ For bug reports or feature requests or if you'd like to contribute to the plugin you can check everything out on [Github](https://github.com/philbuchanan/Accordion-Shortcodes/).
 
 
 
 
168
 
169
+ = Additional Thanks =
 
170
 
171
+ Thank you to [dgrevink](https://github.com/dgrevink) for his support in developing the item IDs and direct linking feature.
 
 
 
 
172
 
173
+ == Screenshots ==
 
 
 
174
 
175
+ 1. The Accordion Group and Accordion Item shortcode buttons in the editor
176
+ 2. The Accordion Group shortcode insertion dialog box
177
+ 3. The Accordion Item shortcode insertion dialog box
178
 
179
+ == Changelog ==
180
+ = 2.0 =
181
+ * NEW: Buttons in the editor to easily add shortcodes with various settings
182
+ * NEW: Support for item IDs on accordion items and direct linking to a specific item
183
+ * NEW: Change the entire semantic structure of your accordions by using definition lists
184
+ * ENHANCED: Class added if JavaScript is disabled (so you can style your accordions differently if necessary)
185
+ * ENHANCED: Each accordion now has its own unique ID (accordion-1, accordion-2...) so you can target each one on a page
186
+ * FIXED: A few incredibly small bugs/annoyances
187
 
188
  == Upgrade Notice ==
189
+ = 2.0 =
190
+ Big changes for version 2.0! See the [changelog](http://wordpress.org/plugins/accordion-shortcodes/changelog/) for details.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
tinymce/images/accordion-item.gif ADDED
Binary file
tinymce/images/accordion-item.svg ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
+ width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
6
+ <g>
7
+ <g>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" fill="#787878" d="M2,3v3h1v11h14V6h1V3H2z M16,16H4V6h12V16z M17,5H3V4h14V5z"/>
9
+ </g>
10
+ </g>
11
+ <rect x="4" y="6" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" width="12" height="10"/>
12
+ </svg>
tinymce/images/accordion.gif ADDED
Binary file
tinymce/images/accordion.svg ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
+ width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
6
+ <g>
7
+ <g>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" fill="#787878" d="M2,2v5h1v8H2v3h16v-3h-1V7h1V2H2z M17,17H3v-1h14V17z M16,15H4V7
9
+ h12V15z M17,6H3V5h14V6z M17,4H3V3h14V4z"/>
10
+ </g>
11
+ </g>
12
+ <rect x="4" y="7" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" width="12" height="8"/>
13
+ </svg>
tinymce/tinymce-plugin.js ADDED
@@ -0,0 +1,148 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ (function() {
2
+ 'use strict';
3
+
4
+ tinymce.create('tinymce.plugins.accordionShortcodesExtensions', {
5
+ init: function(editor, url) {
6
+ editor.addButton('AccordionShortcode', {
7
+ title: 'Add an accordion group',
8
+ cmd: 'accordionShortcode',
9
+ image: url + '/images/accordion.gif'
10
+ });
11
+
12
+ editor.addCommand('accordionShortcode', function() {
13
+ editor.windowManager.open({
14
+ title: 'Insert Accordion Shortcode',
15
+ body: [
16
+ {
17
+ type: 'checkbox',
18
+ name: 'autoclose',
19
+ label: 'Auto Close Accordions',
20
+ checked: true
21
+ },
22
+ {
23
+ type: 'checkbox',
24
+ name: 'openfirst',
25
+ label: 'Open First Accordion'
26
+ },
27
+ {
28
+ type: 'checkbox',
29
+ name: 'openall',
30
+ label: 'Open All Accordions'
31
+ },
32
+ {
33
+ type: 'checkbox',
34
+ name: 'clicktoclose',
35
+ label: 'Click to Close Accordions'
36
+ },
37
+ {
38
+ type: 'checkbox',
39
+ name: 'scroll',
40
+ label: 'Scroll to Top of Accordion'
41
+ },
42
+ {
43
+ type: 'listbox',
44
+ name: 'tag',
45
+ label: 'HTML Tag for Title',
46
+ minWidth: 75,
47
+ values: [
48
+ {text: '---', value: null},
49
+ {text: 'h1', value: 'h1'},
50
+ {text: 'h2', value: 'h2'},
51
+ {text: 'h3', value: 'h3'},
52
+ {text: 'h4', value: 'h4'},
53
+ {text: 'h5', value: 'h5'},
54
+ {text: 'h6', value: 'h6'},
55
+ {text: 'p', value: 'p'},
56
+ {text: 'div', value: 'div'}
57
+ ]
58
+ }
59
+ ],
60
+ onsubmit: function(e) {
61
+ var shortcode = '[accordion';
62
+
63
+ if (e.data.autoclose === false) {
64
+ shortcode += ' autoclose=' + e.data.autoclose;
65
+ }
66
+ if (e.data.openfirst) {
67
+ shortcode += ' openfirst=' + e.data.openfirst;
68
+ }
69
+ if (e.data.openall) {
70
+ shortcode += ' openall=' + e.data.openall;
71
+ }
72
+ if (e.data.clicktoclose) {
73
+ shortcode += ' clicktoclose=' + e.data.clicktoclose;
74
+ }
75
+ if (e.data.scroll) {
76
+ shortcode += ' scroll=' + e.data.scroll;
77
+ }
78
+ if (e.data.tag) {
79
+ shortcode += ' tag=' + e.data.tag;
80
+ }
81
+
82
+ shortcode += ']' + editor.selection.getContent() + '[/accordion]';
83
+
84
+ editor.execCommand('mceInsertContent', 0, shortcode);
85
+ }
86
+ });
87
+ });
88
+
89
+ // Accordion Item
90
+ editor.addButton('AccordionItemShortcode', {
91
+ title: 'Add an accordion item',
92
+ cmd: 'accordionItemShortcode',
93
+ image: url + '/images/accordion-item.gif'
94
+ });
95
+
96
+ editor.addCommand('accordionItemShortcode', function() {
97
+ editor.windowManager.open({
98
+ title: 'Insert Accordion Item Shortcode',
99
+ body: [
100
+ {
101
+ type: 'textbox',
102
+ name: 'title',
103
+ label: 'Accordion Item Title',
104
+ minWidth: 300
105
+ },
106
+ {
107
+ type: 'textbox',
108
+ name: 'id',
109
+ label: 'ID (optional)',
110
+ minWidth: 300
111
+ },
112
+ {
113
+ type: 'container',
114
+ html: 'Each ID on a single page must be unique and cannot contain spaces.'
115
+ }
116
+ ],
117
+ onsubmit: function(e) {
118
+ var shortcode = '[accordion-item title="';
119
+
120
+ if (e.data.title) {
121
+ shortcode += e.data.title;
122
+ }
123
+ shortcode += '"';
124
+
125
+ if (e.data.id) {
126
+ shortcode += ' id=' + e.data.id;
127
+ }
128
+
129
+ shortcode += ']' + editor.selection.getContent() + '[/accordion-item]';
130
+
131
+ editor.execCommand('mceInsertContent', 0, shortcode);
132
+ }
133
+ });
134
+ });
135
+ },
136
+
137
+ getInfo: function() {
138
+ return {
139
+ longname: 'Accordion Buttons',
140
+ author: 'Phil Buchanan',
141
+ authorurl: 'http://philbuchanan.com/',
142
+ version: '2.0'
143
+ };
144
+ }
145
+ });
146
+
147
+ tinymce.PluginManager.add('accordionShortcodesExtensions', tinymce.plugins.accordionShortcodesExtensions);
148
+ }());
tinymce/tinymce.php ADDED
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ # Make sure to not redeclare the class
4
+ if (!class_exists('Accordion_Shortcode_Tinymce_Extensions')) :
5
+
6
+ class Accordion_Shortcode_Tinymce_Extensions {
7
+
8
+ function __construct() {
9
+ add_action('admin_init', array($this, 'button_hooks'));
10
+ }
11
+
12
+ public function button_hooks() {
13
+ if ((current_user_can('edit_posts') || current_user_can('edit_pages')) && get_user_option('rich_editing')) {
14
+ add_filter('mce_external_plugins', array($this, 'add_tinymce_plugin'));
15
+ add_filter('mce_buttons', array($this, 'register_buttons'));
16
+ }
17
+ }
18
+
19
+ public function register_buttons($buttons) {
20
+ $newButtons = array(
21
+ 'AccordionShortcode',
22
+ 'AccordionItemShortcode'
23
+ );
24
+ array_splice($buttons, 12, 0, $newButtons);
25
+
26
+ return $buttons;
27
+ }
28
+
29
+ public function add_tinymce_plugin($plugin_array) {
30
+ $plugin_array['accordionShortcodesExtensions'] = plugins_url('accordion-shortcodes/tinymce/tinymce-plugin.js');
31
+
32
+ return $plugin_array;
33
+ }
34
+
35
+ }
36
+
37
+ endif;