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.
Author: | Metaloha (profile at wordpress.org) |
WordPress version required: | 4.0 |
WordPress version tested: | 4.6.1 |
Plugin version: | 1.0.2 |
Added to WordPress repository: | 27-09-2016 |
Last updated: | 23-09-2016
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
|
Rating, %: | 100 |
Rated by: | 5 |
Plugin URI: | https://github.com/metaloha/dropdown-content |
Total downloads: | 6 406 |
Active installs: | 700+ |
Click to start download
|
Screenshots
The Test 3
option is currently selected
Now the Test 2
option has been selected and the content below the dropdown has changed
FAQ
What is actually happening?
There 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.
How do I override your CSS?
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.
Can I style the dropdown box itself?
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).
What kind of content can be in the content blocks?
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')
ChangeLog
v1.0.2 2016/09/23
- fixed content block custom event delegation
v1.0.1 2016/09/23
- updated documentation
- added screenshots
- added FAQ entries
- added custom jQuery events to Javascript
- 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
v1.0.0 2016/09/22