Accordion Shortcode
Lets you easily add accordions into your posts and pages using the accordion shortcode
The facts
- Rating
- 4.8★ from 8
- Active installs
- 400+
- Price
- Free
- Last updated
- 19 Sep 2012
- Added
- Mar 2012
- Requires WP
- 3.3
- Tested up to
- WP 3.3.2
- Downloads
- 39,596
Our analysis
AI-assistedAccordion Shortcode is a WordPress plugin that allows you to add accordion elements to your posts and pages using shortcodes. You can create multiple accordion tabs, each with its own title and content, by using specific shortcode syntax. The plugin requires you to add your own styling to achieve the desired appearance, as it relies on jQuery UI for functionality.
This plugin is suitable for users who want to implement accordion features on their WordPress site, particularly those comfortable with adding custom CSS for styling. It can be useful for organizing content in a compact format, making it easier for visitors to navigate through information.
Best for: This plugin suits WordPress users looking to add accordion functionality to their content.
What it does well
- ✓Free to use from the WordPress.org directory
- ✓Allows for custom styling with CSS
- ✓Supports multiple accordion tabs
Where it falls short
- •Requires custom CSS for styling
- •Last updated in September 2012
- •Tested only up to WordPress version 3.3.2
Verdict
Accordion Shortcode provides a basic solution for adding accordion elements, but its reliance on custom styling and outdated compatibility may limit its appeal for some users.
From the developer
ctltwp's own description of Accordion Shortcode, lightly tidied.
To make the accordions appear the way you want you need to add your own styling to them
Lets you add accordion to your post and pages.
By using the following shortcodes
[accordions]
[accordion title="title1"] tab content [/accordion]
[accordion title="title2"] another content tab [/accordion]
[/accordions]
will generate the following html.
<div id="random-accordion-id-872" class="accordions-shortcode">
<h3 id="title1-0" ><a href="#title1-0">title1</a></h3>
<div class="accordian-shortcode-content" >
Some Text<br />
</div>
<h3 id="title2-1" ><a href="#title2-1">title2</a></h3>
<div class="accordian-shortcode-content " >
Some Text<br />
</div>
</div>
Additional attributes that you could pass into the shortcode
[accordions autoHeight=’true’ disabled=’false’ active=0 clearStyle=false collapsible=false fillSpace=false ]
[accordion title=’title1′ class=’new-class’]
Some Text
[/accordion]
[accordion title=’title2′ class=’new-class’]
Some Text
[/accordion]
[/accordions]
Sample CSS
Here is some sample css to get you started.
Another place to look for it would be the http://jqueryui.com/themeroller/, The shortcode used the jQuery UI to generate the accordion.
.ui-accordion-header{
margin:5px 0 0;
}
.ui-accordion-header a{
padding:5px 12px;
background: #CCC;
color:#FFF;
display:block;
}
.ui-accordion-header.ui-state-active a,
.ui-accordion-header a:hover{
background-color: #DDD;
}
.ui-accordion-content{
padding-top:10px;
}