Shortcodes for creating responsive accordion drop-downs.

Accordion Shortcodes

<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&#8217;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&#8217;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>&lt;div class="accordion"&gt;
    &lt;h3 class="accordion-title"&gt;Title of accordion item&lt;/h3&gt;
    &lt;div class="accordion-content"&gt;
        Drop-down content goes here.
    &lt;/div&gt;
    &lt;h3 class="accordion-title"&gt;Second accordion item&lt;/h3&gt;
    &lt;div class="accordion-content"&gt;
        Drop-down content goes here.
    &lt;/div&gt;
&lt;/div&gt;
</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&#8217;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&#8217;d like the page to scroll further (useful when the site uses a fixed position header navigation). NOTE: Only use pixel offset integers of &gt; 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>&lt;h2&gt;</code> instead of the default <code>&lt;h3&gt;</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>&lt;button&gt;</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>&lt;button&gt;</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>&lt;div class="accordion"&gt;
    &lt;h3 class="accordion-title"&gt;
        &lt;button&gt;
            Title of accordion item
        &lt;/button&gt;
    &lt;/h3&gt;
    &lt;div class="accordion-content"&gt;
        Drop-down content goes here.
    &lt;/div&gt;
    &lt;h3 class="accordion-title"&gt;
        &lt;button&gt;
            Second accordion item
        &lt;/button&gt;
    &lt;/h3&gt;
    &lt;div class="accordion-content"&gt;
        Drop-down content goes here.
    &lt;/div&gt;
&lt;/div&gt;
</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 &#8216;as-&#8216; 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&#8217;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>


Alternative Plugins for

Discover the Lists with Accordion Shortcodes

Default Install List

Cool Tools

bnsolutions

Default Install List

namaroopa before migrate

vol intsall

startup

Credit Platform

Default.List.01

exp