Having Trouble Hiding an array option in Visual Composer WordPress

3 comments

1. based on information given:

   Html (note i added a new option to show / hide as you only had the only in there)

   <select data-option="" id="select"  class="wpb_vc_param_value wpb-input wpb-select ani_hover dropdown" name="ani_hover"><option value="" class="">--- Please Choose Your Effect ---</option> <option value="hvr-curl-bottom-left" class="hvr-curl-bottom-left">Curl Bottom Left</option>
   <!-- note i am not hiding the original elem, i added a new one, obviously swop the value in the css and js to hide the value you want -->
   <option value="hide-this" class="hvr-curl-bottom-left">Curl Bottom another</option>
   </select>
   
   
   
   <label class="vc_checkbox-label">
   <input id="flat_design-yes" class="wpb_vc_param_value flat_design checkbox" type="checkbox" name="flat_design" value="yes" >
   Check this box to use flat design.
   </label>
   

   Hide the element by default with css (note i am targeting the value of the element, i am using “hide-this” for this example to illustrate)

   .wpb_vc_param_value [value=hide-this]{
       display: none;
   }
   

   Ok now the value will be hidden by default and on page load we need to check for this (you can also do this with php). One disadvantage of using jquery is you have to wait for the jquery file to load before using, using native js you could remove any lag to hide the element….note place outside your original code

   //on doc ready run....
   jQuery(document).ready(function(){
       $= jQuery;
   
       //check if the check box is selected (you can manually test by adding "checked" to the html element 
       // css has the element hidden by default..(see css tab) I have set the value of the element to hide this for an example, you will prob want to modify this, its the value the code checks for. 
       if( $('#flat_design-yes:checked').val() == 'yes' ){
           $('#select > option').each(function(){
               //we are looping over each option 
               if(this.value == 'hide-this'){
                   // we have the value we want..
                   this.style.display = 'inherit';
               }
   
           });
       }
   
   });
   

   js fiddle (note you can check how it works by adding checked to your checkbox in the html and clicking on run)

   http://jsfiddle.net/utwowzkp/14/

   Example inside a function:

   function myCustomDependencyCallback() {
   
       if( jQuery('#flat_design-yes:checked').val() == 'yes' ){
           jQuery('.ani_hover > option').each(function() {
               // we seem to be hiding all options except the default so if the elem has no value, run..
             if ( this.value.length > 0 && jQuery(this).css('display') == 'none') {
                    jQuery(this).css('display', 'block');
             }
           });
       }
   }
   

   updated css:

   .wpb_vc_param_value option{
       display: none;
   }
   
   .wpb_vc_param_value option:first-of-type{
       display: block;
   }
   

   https://jsfiddle.net/4dvxtgnL/5/

   if( jQuery('#flat_design-yes:checked').val() == 'yes' ){
           jQuery('.ani_hover > option').each(function(){
               //we are looping over each option 
   
               if( this.value.match("dont-show$") ){
                   // we have the value we want..
                   this.style.display = 'block';
                   //not sure why but display inherit no longer worked. But display block worked and was friendly with out script for hiding and showing if box is ticked on the fly.
               }
   
           });
   }
   

2. Add to any of param:

   'dependency' => array(
               'callback' => 'myCustomDependencyCallback',
   ),
   

   then in javascript:

   function myCustomDependencyCallback() {
      // your actions with hide/show.
      //example:
       $('.flat_design').change(function() {
          var checked = $(this).is(':checked');
          if(checked) {
             $('select[name="ani_hover"]').find('[LIST OF YOUR OPTIONS']).hide();
          } else {
            $('select[name="ani_hover"]').find('[LIST OF YOUR OPTIONS']).show();
          }
       });
   }
   

3. Okay it seems everything I had in place was working exactly as it should. I came to the conclusion if the JS was adding an element style once it was clicked to do display none/block. Then I need some default css to be in place for the initial load. So i added this little nugget to my style sheet and all seems to be working excellent. Sort of a De De De moment on my end haha.

   .vc_shortcode-param[data-param_type="dropdown"] select.wpb_vc_param_value option.hvr-curl-bottom-left {
   display: none;
   }
   

   If anyone knows of any browser compatability issues with everything I have here please dont esitate to comment. Thanks to anyone who took the time to give this a thought. And @David thanks for giving this a shot.

Comments are closed.