Accordion Shortcodes is a simple plugin that adds a few shortcodes for adding accordion drop-downs to your pages.

The accordions should blend seamlessly with your theme. However, you may want to edit your theme's main stylesheet in order to add some custom styling (see below for sample CSS).

Features

• Adds two shortcodes for adding accordions to your site
• Supports multiple accordions with individual settings on a single page
• Two buttons in the TinyMCE editor make it easy to add and configure the accordion shortcodes
• Responsive
• No default CSS added
• Only adds JavaScript on pages that use the shortcodes
• Support for item IDs and direct links
• Accessible (for users requiring tabbed keyboard navigation control)

Optional Features

• Open the first accordion item by default
• Open all accordion items by default
• Disable auto closing of accordion items
• Manually close items by clicking the title again
• Scroll page to title when it's clicked open
• Set the HTML tag for the title element
• Change the semantic structure of your accordions (advanced)

The Shortcodes

The two shortcodes that are added are:

[accordion]...[/accordion]

and

[accordion-item title=""]...[/accordion-item]

Basic Usage Example

[accordion]
[accordion-item title="Title of accordion item"]Drop-down content goes here.[/accordion-item]
[accordion-item title="Second accordion item"]Drop-down content goes here.[/accordion-item]
[/accordion]

This will output the following HTML:

<div class="accordion">
    <h3 class="accordion-title">Title of accordion item</h3>
    <div class="accordion-content">
        Drop-down content goes here.
    </div>
    <h3 class="accordion-title">Second accordion item</h3>
    <div class="accordion-content">
        Drop-down content goes here.
    </div>
</div>

Why isn't the JavaScript file loading on my site?

This is most likely caused by a poorly coded theme. This plugin makes use of the wp_footer() function to load the JavaScript file and it's dependancy (jQuery). Check your theme to ensure that the wp_footer() function is being called right before the closing </body> tag in your theme's footer.php file.

How can I change the look of the accordion?

No CSS is added by default to the accordion. The accordion should look fine with every theme.

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 to make the accordion look the way you want.

How can I make all accordion content disply when printing the page?

Add this CSS to your theme's CSS stylesheet:

@media print {
    .accordion-content {
        display: block !important;
    }
}

Can I use other shortcodes inside each accordion item?

Absolutely! You can use any of the WordPress format settings and headings as well.

You cannot, however nest an accordion within another accordion. This is a limitation of how WordPress processes shortcodes.

How do I accommodate fixed position headers if I'm using `scroll`?

The scroll setting accepts numeric values as well. So, instead of setting [accordion scroll="true"], you can define a pixel offset for the final scroll position like this: [accordion scroll="50"]. Set the numeric value to the pixel height of your fixed header.

Is it possible to open/close all accordions with a single button click?

Yes! Although you will need to know some simple code to get it working.

In your theme, you'll need to have a Javascript file with the following code:

$('.js-open-everything').click(function() {
    $.each($('.accordion-title'), function(index, value) {
        if (!$(this).hasClass('open')) {
            $(this).trigger('click');
        }
    });
});

Then, you can add a button to your page:

<button class="js-open-everything">Open Everything</button>

I have a lot of extra space showing around my accordions (and other shortcodes). How can I remove it?

WordPress automatically adds paragraphs and line breaks to content formatted in the editor, so if your shortcodes aren't formatted just right, you'll see a lot of extra spacing. Putting this function in your theme's functions.php file should fix it:

/**
 * Fixes empty <p> and <br> tags showing before and after shortcodes in the
 * output content.
 */
function pb_the_content_shortcode_fix($content) {
    $array = array(
        '<p>['    => '[',
        ']</p>'   => ']',
        ']<br />' => ']',
        ']<br>'   => ']'
    );
    return strtr($content, $array);
}
add_filter('the_content', 'pb_the_content_shortcode_fix');

2.4.2

• FIXED: Each accordion group now respects its own settings when using multiple accordions on a single page

2.4.1

• FIXED: Accordions now open onkeyup instead of onkeydown to better comply with WCAG 2.1 accessibility guidelines

2.4.0

• NEW: Added option to add a button tag wrapper around the accordion title
• FIXED: better accessibility support
• Now compatible up to WordPress 5.1

2.3.3

• Now compatible up to WordPress 4.8
• FIXED: aria-mutliselectable is now on the accordion group instead of each accordion item title

2.3.2

• Now compatible up to WordPress 4.7
• FIXED: Accordion titles now truly accessible via keyboard control

2.3.1

• Now compatible up to WordPress 4.6
• FIXED: A bug with a deprecated function in jQuery

2.3.0

• NEW: Added setting to set initial state (open or closed) of individual accordion items on page load
• NEW: Added wp-config option to disable the TinyMCE extension
• Now compatible up to WordPress 4.5

2.2.6

• FIXED: Scroll offset was ignored when an accordion was linked to from another page

2.2.5

• Now compatible up to WordPress 4.4

2.2.4

• Now compatible up to WordPress 4.3

2.2.3

FIXED: A bug where the content editor would break in custom post types

2.2.1

FIXED: A bug where setting both scroll and openfirst would scroll the window without user interaction

2.2

• NEW: Accessible for users requiring tabbed keyboard navigation control (this took way too long)
• NEW: A classname of 'read' is now added to accordion item titles as they are opened. This allows you to style all read accordion items
• NEW: Compatibility mode adds a prefix to the shortcodes for themes that already include accordion shortcodes with matching names
• FIXED: Animation queue not clearing
• Now compatible up to WordPress 4.2

2.1.1

• FIXED: An issue where openfirst would not work if title tag was set to div
• FIXED: An issue where title tag setting was not respected when using multiple accordions on one page

2.1

• NEW: Use multiple accordions on a single page! Each shortcode will now respect its own individual settings.
• Now compatible up to WordPress 4.1

2.0.1

• NEW: Add a custom CSS classname to your accordion item group or accordion item shortcode
• NEW: Set an integer for scroll property to offset the scrolling by that many pixels
• Now compatible up to WordPress 4.0

2.0

• 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

1. Upload the 'accordion-shortcodes' folder to the '/wp-content/plugins/' directory.
2. Activate the plugin through the Plugins menu in WordPress.
3. Add the shortcodes to your content.

The Accordion Group and Accordion Item shortcode buttons in the editor



The Accordion Group shortcode insertion dialog box



The Accordion Item shortcode insertion dialog box