Shortcodes for creating responsive accordion drop-downs.

biplob018

Accordion – Multiple Accordion or FAQs Builder

Accordion - Multiple Accordion or FAQs Builder is the easiest accordion or FAQs Builder Plugin. Create multiple accordion or collapse FAQs with this.

ikhodal

Accordion

Woocommerce Category and Products Accordion Panel

An beautiful woocommerce product accordion panel with categories filtration and various ajax paginations.

jobair

JB Accordion

JB Accordion is a Responsive super Multi Color and Animated Content plugin for your wordpress theme.

philbuchanan

<p>Accordion Shortcodes is a simple plugin that adds a few shortcodes for adding accordion drop-downs to your pages.</p>
<p>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).</p>
<h4>Features</h4>
<ul>
<li>Adds two shortcodes for adding accordions to your site</li>
<li>Supports multiple accordions with individual settings on a single page</li>
<li>Two buttons in the TinyMCE editor make it easy to add and configure the accordion shortcodes</li>
<li>Responsive</li>
<li>No default CSS added</li>
<li>Only adds JavaScript on pages that use the shortcodes</li>
<li>Support for item IDs and direct links</li>
<li>Accessible (for users requiring tabbed keyboard navigation control)</li>
</ul>
<h4>Optional Features</h4>
<ul>
<li>Open the first accordion item by default</li>
<li>Open all accordion items by default</li>
<li>Disable auto closing of accordion items</li>
<li>Manually close items by clicking the title again</li>
<li>Scroll page to title when it’s clicked open</li>
<li>Set the HTML tag for the title element</li>
<li>Change the semantic structure of your accordions (advanced)</li>
</ul>
<h4>The Shortcodes</h4>
<p>The two shortcodes that are added are:</p>
<pre><code>[accordion]...[/accordion]
</code></pre>
<p>and</p>
<pre><code>[accordion-item title=""]...[/accordion-item]
</code></pre>
<h4>Basic Usage Example</h4>
<pre><code>[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]
</code></pre>
<p>This will output the following HTML:</p>
<pre><code><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>
</code></pre>
<h4>Sample CSS</h4>
<p>Here is some sample CSS to get you started if you want to customize the look and feel of the accordion.</p>
<pre><code>/* Accordion Styles */
.accordion {
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 20px;
}
.accordion-title {
    border-top: 1px solid #dbdbdb;
    margin: 0;
    padding: 20px 0;
    cursor: pointer;
}
.accordion-title:hover {}
.accordion-title:first-child {border: none;}
.accordion-title.open {cursor: default;}
.accordion-content {padding-bottom: 20px;}
</code></pre>
<h4>Opening an Accordion Via ID</h4>
<p>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:</p>
<pre><code>[accordion]
[accordion-item id="item-1" title="Title of accordion item"]Drop-down content goes here.[/accordion-item]
[accordion-item id="item-2" title="Second accordion item"]Drop-down content goes here.[/accordion-item]
[accordion-item id="item-3" title="A Third accordion"]Drop-down content goes here.[/accordion-item]
[/accordion]
</code></pre>
<p>You could use this URL to open the third item by default:</p>
<pre><code>http://yourdomain.com/your/path/#item-3
</code></pre>
<p>All you need to do is ensure that the part after the <code>#</code> in the URL matches the ID set on the accordion item.</p>
<h4>Advanced Accordion Settings</h4>
<p>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:</p>
<pre><code>[accordion autoclose="true" openfirst="false" openall="false" clicktoclose="false"]
</code></pre>
<p><strong>autoclose</strong>: Sets whether accordion items close automatically when you open the next item. Set <code>autoclose="true/false"</code> on the opening accordion shortcode like this: <code>[accordion autoclose="false"]</code>. Default is <code>true</code>.</p>
<p><strong>openfirst</strong>: Sets whether the first accordion item is open by default. This setting will be overridden if <strong>openall</strong> is set to true. Set <code>openfirst="true/false"</code> on the opening accordion shortcode like this: <code>[accordion openfirst="true"]</code>. Default is <code>false</code>.</p>
<p><strong>openall</strong>: Sets whether all accordion items are open by default. It is recommended that this setting be used with <strong>clicktoclose</strong>. Set <code>openall="true/false"</code> on the opening accordion shortcode like this: <code>[accordion openall="true"]</code>. Default is <code>false</code>.</p>
<p><strong>clicktoclose</strong>: Sets whether clicking an open title closes it. Set <code>clicktoclose="true/false"</code> on the opening accordion shortcode like this: <code>[accordion clicktoclose="true"]</code>. Default is <code>false</code>.</p>
<p><strong>scroll</strong>: Sets whether to scroll to the title when it’s clicked open. This is useful if you have a lot of content within your accordion items. Set <code>scroll="true/false"</code> on the opening accordion shortcode like this: <code>[accordion scroll="true"]</code>. Default is <code>false</code>. You may also specify an integer for a pixel offset if you’d like the page to scroll further (useful when the site uses a fixed position header navigation). NOTE: Only use pixel offset integers of > 0. If you do not want a scroll offset, but still want scrolling, simply use <code>scroll="true"</code>.</p>
<p><strong>class</strong>: Sets a custom CSS class for the accordion group or individual accordion items. Set <code>class="your-class-name"</code> on the opening accordion or accordion-item shortcode like this: <code>[accordion class="your-class-name"]</code> or <code>[accordion-item class="your-class-name"]</code>. Added a class to the accordion-item will add the class to the title HTML tag.</p>
<p><strong>tag</strong>: Set the global HTML tag to use for all accordion titles. Set <code>tag="h2"</code> on the opening accordion shortcode like this: <code>[accordion tag="h2"]</code>. Default is <code>h3</code>.</p>
<p><strong>semantics</strong>: You can change the entire semantic structure of the accordions to use a definition list (dl, dt, dd) by setting <code>semantics="dl"</code> on the opening accordion shortcode like this: <code>[accordion semantics="dl"]</code>. By default the accordion will use <code>div</code> tags for the wrapper and content containers. If you set this option to <code>dl</code>, it is recommended that you do not also use the <code>tag</code> option. This feature is not selectable from the accordion button dialog box and must be added manually.</p>
<h4>Advanced Accordion Item Settings</h4>
<p><strong>state</strong>: Sets the initial state of the accordion item to <code>open</code> or <code>closed</code>. Set <code>state=open</code> or <code>state=closed</code> on the opening accordion item shortcode like this: <code>[accordion-item state=open]</code>. This setting will override all other accordion settings except when linking to an accordion item via ID.</p>
<p><strong>tag</strong>: You can also set the HTML tag for the titles of each accordion item individually by adding <code>tag="tagname"</code> to each <code>[accordion-item]</code> shortcode. Make sure to <strong>not</strong> include the angle brackets around the tag name. Example: to use <code><h2></code> instead of the default <code><h3></code> tag: <code>[accordion-item title="Item title" tag="h2"]Item content[/accordion-item]</code>. 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.</p>
<p><strong>usebutons</strong>: You can now optionally wrap each accordion item title in a <code><button></code> tag by adding <code>usebuttons="true"</code> to the main <code>[accordion]</code> shortcode. Please note that your theme may apply undesirable styles to <code><button></code> tags by default. You may need to add more custom styles to override your themes default styles. Using this setting will produce this HTML output:</p>
<pre><code><div class="accordion">
    <h3 class="accordion-title">
        <button>
            Title of accordion item
        </button>
    </h3>
    <div class="accordion-content">
        Drop-down content goes here.
    </div>
    <h3 class="accordion-title">
        <button>
            Second accordion item
        </button>
    </h3>
    <div class="accordion-content">
        Drop-down content goes here.
    </div>
</div>
</code></pre>
<h4>Filtering Shortcodes</h4>
<p>You can filter the settings and content of the shortcodes by adding some simply code to the functions.php file of your theme.</p>
<p>For example, you could set the <code>openfirst</code> option for all accordions across the entire site using:</p>
<pre><code>add_filter('shortcode_atts_accordion', 'set_accordion_shortcode_defaults', 10, 3);
function set_accordion_shortcode_defaults($atts) {
    // Override the openfirst setting here
    $atts['openfirst'] = true;
    return $atts;
}
</code></pre>
<h4>Compatibility Mode</h4>
<p>If you have a theme that already includes the shortcodes <code>[accordion]</code> or <code>[accordion-item]</code> you can enable compatibility mode.</p>
<p>To enable compatibility mode add <code>define('AS_COMPATIBILITY', true);</code> to your wp-config.php file. This will add a prefix of ‘as-‘ to the two accordion shortcodes.</p>
<p>With compatibility mode enabled, make sure your shortcodes start with <code>as-</code> like this: <code>[as-accordion]...[/as-accordion]</code> and <code>[as-accordion-item]...[/as-accordion-item]</code>.</p>
<h4>Disable TinyMCE Buttons</h4>
<p>You can optionally disable the TinyMCE extension which will remove the buttons from the editor button bar. To disable the TinyMCE extension add <code>define('AS_TINYMCE', false);</code> to your wp-config.php file.</p>
<h4>Issues/Suggestions</h4>
<p>For bug reports or feature requests or if you’d like to contribute to the plugin you can check everything out on <a href="https://github.com/philbuchanan/Accordion-Shortcodes/" rel="nofollow ugc">Github</a>.</p>


Accordion Shortcodes

The only improvement that I can imagine is to automatically add 
cursor:pointer to the class accordion-title.

Otherwise people might not realize that they can click there.

Simple and does the job

I needed a replacement for the [toggle] shortcode in the Canvas theme by WooThemes and this does the job perfectly. It doesn't have all the bells and whistles of [toggle], but I wasn't using those anyway.
Here is the css I used, based on the example johanneseva gave in his comment (Thanks!)
Mine creates a grey background for each accordion item.

.accordion-title {
	background-image: url(./images/shortcode-toggle-open.png);
	background-size: 20px 20px;
	background-position: right center;
	background-repeat: no-repeat;
	padding-right: 26px; /* so that title does not overlap icon */
}
.accordion-title.open {
	background-image: url(./images/shortcode-toggle-close.png);
}
.accordion h4.accordion-title {
	border-right: 5px solid #e4e8ec; /* so that icon is some distance from right border */
	background-color: #e4e8ec;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	cursor: pointer;
}
.accordion-content {
	border: 1px solid #ebebeb;
	background: #f9f9f9;
	padding: 10px 10px;
}

Alternatives to Accordion Shortcodes

Top alternatives