WordPress.org

Ready to get started?Download WordPress

Plugin Directory

JQuery Expanding Box

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

Usage

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
  • single_open - This controls whether this dropdown is part of the single opening group (only one dropdown in the group can be open at a time)

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].

This plugin also adds a small CSS file (352 bytes) to wp_head to control the styling.

As of version 2, the plugin contains a menu for setting default options for the plugin and the attributes used in the plugin support HTML.

Usage Examples

A simple usage example to get you going.

dropdown_box_toggle_all [dropdown_box_toggle_all hide="Hide All" show="Show All" separator="|" /]

dropdown_box [dropdown_box expand_text="Information" show_more="More" show_less="Less" start="hide"]This is my content and it will start hidden[/dropdown_box]

Requires: 3 or higher
Compatible up to: 3.5.2
Last Updated: 2013-1-3
Downloads: 14,102

Ratings

3 stars
3.8 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,2,2
50,2,1
0,1,0
100,2,2
100,2,2
0,1,0