{"id":51086,"date":"2016-09-27T02:46:37","date_gmt":"2016-09-27T02:46:37","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/dropdown-content\/"},"modified":"2016-09-23T06:15:13","modified_gmt":"2016-09-23T06:15:13","slug":"dropdown-content","status":"closed","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/dropdown-content\/","author":15137240,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.2","stable_tag":"1.0.2","tested":"4.6.30","requires":"4.0","requires_php":"","requires_plugins":"","header_name":"Dropdown Content","header_author":"Metaloha","header_description":"","assets_banners_color":"edefec","last_updated":"2016-09-23 06:15:13","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/metaloha\/dropdown-content","header_author_uri":"https:\/\/metaloha.com","rating":5,"author_block_rating":0,"active_installs":500,"downloads":7147,"num_ratings":5,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":"5"},"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":"1503693","resolution":"256x256","location":"assets"}},"assets_banners":{"banner-1880x609.jpg":{"filename":"banner-1880x609.jpg","revision":"1503693","resolution":"1880x609","location":"assets"}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.2"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":"1503693","resolution":"1","location":"assets"},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":"1503693","resolution":"2","location":"assets"}},"screenshots":{"1":"The <code>Test 3<\/code> option is currently selected","2":"Now the <code>Test 2<\/code> option has been selected and the content below the dropdown has changed"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[3959,1863,1864,80],"plugin_category":[43],"plugin_contributors":[126814],"plugin_business_model":[],"class_list":["post-51086","plugin","type-plugin","status-closed","hentry","plugin_tags-drop-down","plugin_tags-dropdown","plugin_tags-select","plugin_tags-shortcode","plugin_category-customization","plugin_contributors-metaloha","plugin_committers-metaloha"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/dropdown-content_edefec.svg","icon_2x":false,"generated":true},"screenshots":[{"src":"https:\/\/ps.w.org\/dropdown-content\/assets\/screenshot-1.jpg?rev=1503693","caption":"The <code>Test 3<\/code> option is currently selected"},{"src":"https:\/\/ps.w.org\/dropdown-content\/assets\/screenshot-2.jpg?rev=1503693","caption":"Now the <code>Test 2<\/code> option has been selected and the content below the dropdown has changed"}],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<h3>Usage<\/h3>\n\n<p>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.<\/p>\n\n<pre><code>[dropdown name=\"controlName\" class=\"customClassName\"] - both `name` and `class` are optional; `name` will default to `dropdown-content`\n<\/code><\/pre>\n\n<ul>\n<li>the <code>name<\/code> 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 name<\/li>\n<li><code>class<\/code> can be a space-separated list of class names, or just a single class name<\/li>\n<li><p>only <code>[dropdown-option]<\/code> shortcodes may be inside this shortcode<\/p>\n\n<p>[dropdown-option value=\"someValue\"] - the <code>value<\/code> field is technically optional, but is required if this option is meant to make a content block visible<\/p><\/li>\n<li><p>must be inside a <code>[dropdown]<\/code> shortcode<\/p>\n\n<p>[dropdown-content name=\"controlName\" value=\"someValue\"] - if the <code>name<\/code> matches a dropdown name, and the <code>value<\/code> matches the value of an option within that dropdown, then this content will be displayed when that specific option is selected.<\/p><\/li>\n<li><p>again, <code>name<\/code> is technically optional, but must match a <code>[dropdown]<\/code> name (also defaults to <code>dropdown-content<\/code>)<\/p><\/li>\n<li><code>value<\/code> is required, and must match a <code>value<\/code> for a <code>[dropdown-option]<\/code><\/li>\n<li>can be anywhere on the page<\/li>\n<\/ul>\n\n<h3>Example<\/h3>\n\n<p><em>Copy and paste the following content to see the plugin in action<\/em><\/p>\n\n<p>[dropdown]\n[dropdown-option]Select one...[\/dropdown-option]\n[dropdown-option value=\"option1\"]First option[\/dropdown-option]\n[dropdown-option value=\"option2\"]Second Option[\/dropdown-option]\n[\/dropdown]<\/p>\n\n<p>[dropdown-content value=\"option1\"]Content for the first option.[\/dropdown-content]<\/p>\n\n<p>[dropdown-content value=\"option2\"]Content for the second option.[\/dropdown-content]<\/p>\n\n<p>Those were all using the default values from the plugin. Let's change it up a bit.<\/p>\n\n<p>[dropdown]\n[dropdown-option value=\"option1\"]The First[\/dropdown-option]\n[dropdown-option value=\"option2\" default=true]The Second[\/dropdown-option]\n[dropdown-option value=\"option3\"]The Third[\/dropdown-option]\n[\/dropdown]<\/p>\n\n<p>You'll notice below that the second option will be displayed by default for you.<\/p>\n\n<p>[dropdown-content value=\"option1\"]Some different content for the second first option.[\/dropdown-content]<\/p>\n\n<p>[dropdown-content value=\"option2\"]Some different content for the second second option.[\/dropdown-content]<\/p>\n\n<p>[dropdown-content value=\"option3\"]Some different content for the second third option.[\/dropdown-content]<\/p>\n\n<!--section=installation-->\n<p>The plugin is simple to install:<\/p>\n\n<ol>\n<li>Download the plugin, it will arrive as a zip file<\/li>\n<li>Unzip it<\/li>\n<li>Upload <code>dropdown-content.zip<\/code> directory to your WordPress Plugin directory<\/li>\n<li>Go to the plugin management page and enable the plugin<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt>What is actually happening?<\/dt>\n<dd><p>There is a tiny bit of Javascript that watches these generated dropdowns for the <code>change<\/code> event, and simply adds the class <code>dropdowncontent-content-selected<\/code> to the content block that has the same value as the selected option.<\/p><\/dd>\n<dt>How do I override your CSS?<\/dt>\n<dd><p>Only three classes are used: <code>dropdowncontent-dropdown<\/code> for the dropdown control itself and has no default styling, <code>dropdowncontent-content<\/code> which has a single rule (<code>display:none;<\/code>) for content blocks, and the <code>dropdowncontent-content-selected<\/code> class which has a single rule (<code>display:inherit;<\/code>) for selected content blocks. Feel free to override those styles however you like in your own stylesheets.<\/p><\/dd>\n<dt>Can I style the dropdown box itself?<\/dt>\n<dd><p>Absolutely! It is a normal <code>SELECT<\/code> box and can be modified by any CSS or Javascript you like. You can target the default <code>dropdowncontent-dropdown<\/code> class, any custom class you add to the shortcode, or the field name (which defaults to <code>dropdown-content<\/code> but can be modified by the shortcode).<\/p><\/dd>\n<dt>What kind of content can be in the content blocks?<\/dt>\n<dd><p>Anything! By default, though, since the blocks are given <code>display:none;<\/code> 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 <code>dropdowncontent-content<\/code> class and will fire in this order:<\/p>\n\n<ol>\n<li><code>dropdown-content:unselect<\/code> will fire when a dropdown option is unselected and <code>$(this)<\/code> will refer to the previously selected content block; the previous <code>value<\/code> and <code>name<\/code> fields can be found with <code>$(this).attr('data-dropdowncontent-value')<\/code> and <code>$(this).attr('data-dropdowncontent-name')<\/code><\/li>\n<li><code>dropdown-content:select<\/code> will fire when a dropdown option is selected, and <code>$(this)<\/code> will refer to the newly selected content block; the current <code>value<\/code> and <code>name<\/code> fields can be found with <code>$(this).attr('data-dropdowncontent-value')<\/code> and <code>$(this).attr('data-dropdowncontent-name')<\/code><\/li>\n<\/ol><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>v1.0.2 2016\/09\/23<\/h4>\n\n<ul>\n<li>fixed content block custom event delegation<\/li>\n<\/ul>\n\n<h4>v1.0.1 2016\/09\/23<\/h4>\n\n<ul>\n<li>updated documentation<\/li>\n<li>added screenshots<\/li>\n<li>added FAQ entries<\/li>\n<li>added custom jQuery events to Javascript<\/li>\n<li>now uses delegated listener in case dropdowns are hidden on page load or loaded via AJAX<\/li>\n<li>removed references to \"visible\" in code and documentation, replaced with \"select\" instead<\/li>\n<\/ul>\n\n<h4>v1.0.0 2016\/09\/22<\/h4>\n\n<ul>\n<li>First public release<\/li>\n<\/ul>","raw_excerpt":"Allows different content to be displayed based on the value of an author-defined drop-down box.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/51086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=51086"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/metaloha"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=51086"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=51086"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=51086"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=51086"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=51086"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=51086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}