Allows different content to be displayed based on the value of an author-defined drop-down box.
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`
name
is 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 nameclass
can be a space-separated list of class names, or just a single class nameonly [dropdown-option]
shortcodes may be inside this shortcode
[dropdown-option value=”someValue”] – the value
field is technically optional, but is required if this option is meant to make a content block visible
must be inside a [dropdown]
shortcode
[dropdown-content name=”controlName” value=”someValue”] – if the name
matches a dropdown name, and the value
matches the value of an option within that dropdown, then this content will be displayed when that specific option is selected.
again, name
is technically optional, but must match a [dropdown]
name (also defaults to dropdown-content
)
value
is required, and must match a value
for a [dropdown-option]
Copy and paste the following content to see the plugin in action
[dropdown]
[dropdown-option]Select one…[/dropdown-option]
[dropdown-option value=”option1″]First option[/dropdown-option]
[dropdown-option value=”option2″]Second Option[/dropdown-option]
[/dropdown]
[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]
[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]
[/dropdown]
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:
dropdown-content.zip
directory to your WordPress Plugin directoryThere is a tiny bit of Javascript that watches these generated dropdowns for the change
event, and simply adds the class dropdowncontent-content-selected
to the content block that has the same value as the selected option.
Only three classes are used: dropdowncontent-dropdown
for the dropdown control itself and has no default styling, dropdowncontent-content
which has a single rule (display:none;
) for content blocks, and the dropdowncontent-content-selected
class which has a single rule (display:inherit;
) for selected content blocks. Feel free to override those styles however you like in your own stylesheets.
Absolutely! It is a normal SELECT
box and can be modified by any CSS or Javascript you like. You can target the default dropdowncontent-dropdown
class, any custom class you add to the shortcode, or the field name (which defaults to dropdown-content
but can be modified by the shortcode).
Anything! By default, though, since the blocks are given display:none;
as their default rule, things like maps or other Javascript targets that require a visible container may not work quite as expected. To account for that, there are two custom jQuery events attached to elements with the dropdowncontent-content
class and will fire in this order:
dropdown-content:unselect
will fire when a dropdown option is unselected and $(this)
will refer to the previously selected content block; the previous value
and name
fields can be found with $(this).attr('data-dropdowncontent-value')
and $(this).attr('data-dropdowncontent-name')
dropdown-content:select
will fire when a dropdown option is selected, and $(this)
will refer to the newly selected content block; the current value
and name
fields can be found with $(this).attr('data-dropdowncontent-value')
and $(this).attr('data-dropdowncontent-name')