shortdark

<p>Adds an accordion using plaing javascript and CSS, not jQuery.</p>
<p>Please let me know if you like this plugin by leaving a review or <a href="http://www.shortdark.net/contact-me/" rel="nofollow ugc">contacting me</a>.</p>
<p>Go to the <a href="http://www.shortdark.net/wordpress-plugin/" rel="nofollow ugc">Shortdark WordPress plugin page</a> for more information.</p>


Javascript CSS Accordion

Adds an accordion using plain javascript and CSS, not jQuery. Tested on PHP 5 through PHP 8.

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;
}

Excellent - Here's another css example

Shortcodes for creating responsive accordion drop-downs.

Javascript CSS Accordion vs Accordion Shortcodes