This plugin creates a shortcode to add an expandable box to show and hide the selected content on a post or page with customisable show and hide links.
This is the perfect solution for content such as FAQs and Spoilers, where you may not want to show the content to begin with, but prompt the reader to show the content instead.
The plugin comes with two shortcodes for use inside a posts and pages; these are: [ dropdown_box ] and [ dropdown_box_toggle_all ].
- dropdown_box is used to add a single dropdown box to your content, it supports 4 attributes:
- expand_text – This is the text which is shown AFTER the verb to show or hide, for example “More Information”
- show_more – This is the verb shown before the expand text to prompt a user to see more content, for example “Show”
- show_less – This is the verb shown before the expand text to prompt a user to see less content, for example “Hide”
- start – This sets the default state, and has 2 usable values, “Show” to start the box visable, and “Hide” to show the box hidden
Your content is added inside the shortcode, for example [ dropdown_box ]This is my content inside the dropdown box[ /dropdown_box ]
The content insider the box is open to standard WordPress formatting.
- dropdown_box_toggle_all is used to add links to show/hide all drop down boxes on the page, this shortcode can be used in more than one place on the page and has 3 attributes
- hide – This is the text used to prompt a hide all, for example “Hide All”
- show – This is the text used to prompt a show all, for example “Show All”
- Separator – This is the separator between the show and hide links, for example “|”
This shortcode is self closing, so can be written as [ dropdown_box_toggle_all / ] or [ dropdown_box_toggle_all ](without the spaces).
This plugin also adds a small CSS file (352 bytes) to wp_head to control the styling.
A simple usage example to get you going.
[ dropdown_box_toggle_all hide=”Hide All” show=”Show All” separator=”|” / ] (without spaces next to the [ and ]) creates:
[ dropdown_box expand_text=”Information” show_more=”More” show_less=”Less” start=”hide” ]This is my content and it will start hidden[ /dropdown_box ] (without spaces next to the [ and ]) creates:
This is my content and it will start hidden
Frequently Asked Questions
What are the plugin requirements to work?
The basic plugin requirements are the JQuery script and the plugins CSS file
What browsers has this been tested in?
The plugin has been tested and is working in the following Windows browsers:
- Mozilla Firefox Version 10 – although support is indicated from version 4
- Microsoft Internet Explorer 9
- Microsoft Internet Explorer 8
- Microsoft Internet Explorer 8 (compatibility mode)
- Microsoft Internet Explorer 10 (simulation testing)
- Microsoft Internet Explorer 7 (simulation testing)
- Microsoft Internet Explorer 6 (simulation testing)
- Opera 11.52
- Google Chrome 17.0.963.56 m
- Apple Safari 5.1.2
The plugin was tested and does not work in:
- Microsoft Internet Explorer 5 (simulation testing)
Have you tested it in another browser? Tell us!
I like your work, can I donate?
YES! you can donate using the plugin’s donation link or via the Donate button at the top of the page
I still have a question
If you still have a question, leave it in the comments below!
What have you used the plugin for? what do you think of it? Tell us in the comments!