{"id":3783,"date":"2017-06-24T13:27:31","date_gmt":"2017-06-24T11:27:31","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=3783"},"modified":"2020-02-09T10:59:48","modified_gmt":"2020-02-09T09:59:48","slug":"conditional-displaying-and-hiding-of-customizer-controls-via-javascript","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/conditional-displaying-and-hiding-of-customizer-controls-via-javascript-3783\/","title":{"rendered":"Conditional displaying and hiding of customizer controls via JavaScript"},"content":{"rendered":"\n<p>When using <em>Partial Refresh<\/em> in the customizer to reload only a part of the preview after changing a setting\u2019s value, the active_callback for these settings is not working anymore. With <code class=\"lang-php\">active_callback<\/code> you can, for example, show a control only if another control has a particular value. In that case, the conditional displaying has to be done with JavaScript.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>The customizer comes with an API, which lets us activate and deactivate (show and hide) controls in a relatively straightforward way. In this tutorial, we are going to display or hide a control, depending on the value of a select list control. At first, the complete code (<a href=\"https:\/\/gist.github.com\/FlorianBrinkmann\/e44e62eb77333e8e080d7ac605b91da0\">also available as a Gist<\/a>. You can enqueue it via the <code class=\"lang-php\">customize_controls_enqueue_scripts<\/code> action):<\/p>\n\n\n<pre class=\"wp-block-code lang-javascript\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><div><code class=\"hljs language-php\">;(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">()<\/span> <\/span>{\n\t<span class=\"hljs-comment\">\/**\n\t * Run function when customizer is ready.\n\t *\/<\/span>\n\twp.customize.bind(<span class=\"hljs-string\">'ready'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">()<\/span> <\/span>{\n\t\twp.customize.control(<span class=\"hljs-string\">'slug_select_control'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(control)<\/span> <\/span>{\n\t\t\t<span class=\"hljs-comment\">\/**\n\t\t\t * Run function on setting change of control.\n\t\t\t *\/<\/span>\n\t\t\tcontrol.setting.bind(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(value)<\/span> <\/span>{\n\t\t\t\t<span class=\"hljs-keyword\">switch<\/span> (value) {\n\t\t\t\t\t<span class=\"hljs-comment\">\/**\n\t\t\t\t\t * The select was switched to the hide option.\n\t\t\t\t\t *\/<\/span>\n\t\t\t\t\t<span class=\"hljs-keyword\">case<\/span> <span class=\"hljs-string\">'hide'<\/span>:\n\t\t\t\t\t\t<span class=\"hljs-comment\">\/**\n\t\t\t\t\t\t * Deactivate the conditional control.\n\t\t\t\t\t\t *\/<\/span>\n\t\t\t\t\t\twp.customize.control(<span class=\"hljs-string\">'slug_conditional_control'<\/span>).deactivate();\n\t\t\t\t\t\t<span class=\"hljs-keyword\">break<\/span>;\n\t\t\t\t\t<span class=\"hljs-comment\">\/**\n\t\t\t\t\t * The select was switched to \u00bbshow\u00ab.\n\t\t\t\t\t *\/<\/span>\n\t\t\t\t\t<span class=\"hljs-keyword\">case<\/span> <span class=\"hljs-string\">'show'<\/span>:\n\t\t\t\t\t\t<span class=\"hljs-comment\">\/**\n\t\t\t\t\t\t * Activate the conditional control.\n\t\t\t\t\t\t *\/<\/span>\n\t\t\t\t\t\twp.customize.control(<span class=\"hljs-string\">'slug_conditional_control'<\/span>).activate();\n\t\t\t\t\t\t<span class=\"hljs-keyword\">break<\/span>;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t});\n})();<\/code><\/div><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We listen to the <code class=\"lang-javascript\">ready<\/code> event of the customizer and hook a function to the control with the ID <code class=\"lang-javascript\">slug_select_control<\/code>, which was created with the options <code class=\"lang-javascript\">hide<\/code> and <code class=\"lang-javascript\">show<\/code> via <code class=\"lang-php\">$wp_customize-&gt;add_control()<\/code>. With <code class=\"lang-javascript\">control.setting.bind<\/code>, we can now call a function after the value of the control has changed.<\/p>\n\n\n\n<p>After a change of the setting, we run a <code class=\"lang-javascript\">switch<\/code> statement and show or hide the <code class=\"lang-javascript\">slug_conditional_control<\/code> control with the <code class=\"lang-javascript\">activate()<\/code> respectively <code class=\"lang-javascript\">deactivate()<\/code> method.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When using Partial Refresh in the customizer to reload only a part of the preview after changing a setting\u2019s value, the active_callback for these settings is not working anymore. With active_callback you can, for example, show a control only if another control has a particular value. In that case, the conditional displaying has to be [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","lazy_load_responsive_images_disabled":false},"categories":[115],"tags":[],"wp-worthy-pixel":{"ignored":false,"public":"477b689c408b438c8d3c226234461d12","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/477b689c408b438c8d3c226234461d12"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3783"}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3783"}],"version-history":[{"count":2,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3783\/revisions"}],"predecessor-version":[{"id":5877,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3783\/revisions\/5877"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}