Club Drupal

/**

 * @file

 * Custom state for handling visibility

 */

/**

 * Add a new state to Drupal #states. We use this to toggle element-invisible

 * to show/hidden #states elements. This allows elements to be visible to

 * screen readers.

 *

 * To use:

 * $form['my_form_field'] = array(

 *   ..

 *   // Only show this field if 'some_other_field' is checked.

 *   '#states => array(

 *     'show' => array(

 *       'some-other-field' => array('checked' => TRUE),

 *     ),

 *   ),

 *   ..

 *   // Required to load the 'show' state handler.

 *   '#attached' => array(

 *     'js' => array(ctools_attach_js('states-show')),

 *   ),

 * );

 */

(function ($) {

  'use strict';

  Drupal.states.State.aliases.hidden = '!show';

  // Show/hide form items by toggling the 'element-invisible' class. This is a

  // more accessible option than the core 'visible' state.

  $(document).bind('state:show', function(e) {

    if (e.trigger) {

      var element = $(e.target).closest('.form-item, .form-submit, .form-wrapper');

      element.toggle(e.value);

      e.value === true ? element.removeClass('element-invisible') : element.addClass('element-invisible');

    }

  });

})(jQuery);