Use a shortcode to define a drop-down form field, and shortcodes to define blocks of content that will be displayed when a specific entry is selected.
To add a content dropdown to a post, you can either select the Content Dropdown icon from the TinyMCE editor, or enter the shortcodes manually.
[dropdown name="controlName" class="customClassName"] - both `name` and `class` are optional; `name` will default to `dropdown-content`
nameis used to identify which content sections are targetted by this dropdown; if there is only one dropdown on a page, it is optional; if there are multiple dropdowns on a page, each will need a unique name
classcan be a space-separated list of class names, or just a single class name
[dropdown-option]shortcodes may be inside this shortcode
[dropdown-option value=”someValue”] – the
valuefield is technically optional, but is required if this option is meant to make a content block visible
must be inside a
[dropdown-content name=”controlName” value=”someValue”] – if the
namematches a dropdown name, and the
valuematches the value of an option within that dropdown, then this content will be displayed when that specific option is selected.
nameis technically optional, but must match a
[dropdown]name (also defaults to
valueis required, and must match a
- can be anywhere on the page
Copy and paste the following content to see the plugin in action
[dropdown-option value=”option1″]First option[/dropdown-option]
[dropdown-option value=”option2″]Second Option[/dropdown-option]
[dropdown-content value=”option1″]Content for the first option.[/dropdown-content]
[dropdown-content value=”option2″]Content for the second option.[/dropdown-content]
Those were all using the default values from the plugin. Let’s change it up a bit.
[dropdown-option value=”option1″]The First[/dropdown-option]
[dropdown-option value=”option2″ default=true]The Second[/dropdown-option]
[dropdown-option value=”option3″]The Third[/dropdown-option]
You’ll notice below that the second option will be displayed by default for you.
[dropdown-content value=”option1″]Some different content for the second first option.[/dropdown-content]
[dropdown-content value=”option2″]Some different content for the second second option.[/dropdown-content]
[dropdown-content value=”option3″]Some different content for the second third option.[/dropdown-content]
The plugin is simple to install:
- Download the plugin, it will arrive as a zip file
- Unzip it
dropdown-content.zipdirectory to your WordPress Plugin directory
- Go to the plugin management page and enable the plugin
- What is actually happening?
changeevent, and simply adds the class
dropdowncontent-content-selectedto the content block that has the same value as the selected option.
- How do I override your CSS?
Only three classes are used:
dropdowncontent-dropdownfor the dropdown control itself and has no default styling,
dropdowncontent-contentwhich has a single rule (
display:none;) for content blocks, and the
dropdowncontent-content-selectedclass which has a single rule (
display:inherit;) for selected content blocks. Feel free to override those styles however you like in your own stylesheets.
- Can I style the dropdown box itself?
Absolutely! It is a normal
dropdowncontent-dropdownclass, any custom class you add to the shortcode, or the field name (which defaults to
dropdown-contentbut can be modified by the shortcode).
- What kind of content can be in the content blocks?
Anything! By default, though, since the blocks are given
dropdowncontent-contentclass and will fire in this order:
dropdown-content:unselectwill fire when a dropdown option is unselected and
$(this)will refer to the previously selected content block; the previous
namefields can be found with
dropdown-content:selectwill fire when a dropdown option is selected, and
$(this)will refer to the newly selected content block; the current
namefields can be found with
- fixed content block custom event delegation
- updated documentation
- added screenshots
- added FAQ entries
- now uses delegated listener in case dropdowns are hidden on page load or loaded via AJAX
- removed references to “visible” in code and documentation, replaced with “select” instead
- First public release