I’m using the form API #states feature to show and hide fields based on the value of other inputs. This is working great; however, I would like to have the option to fade or slide the inputs as they are shown and hidden.
I realise the conditional fields module offers this functionality, but I found it too buggy to use.
I am using this code.
$form['more_info'] = array( '#type' => 'fieldset', '#title' => t('Additional Information'), '#collapsible' => TRUE, '#collapsed' => TRUE, // Expand the expand_more_info fieldset if the box is checked. '#states' => array( 'expanded' => array( ':input[name="expand_more_info"]' => array('checked' => TRUE), ), ), );
This made me think using ‘expanded’ instead of ‘visible’ would make the element slide and not just appear however this is not working for me.
I am editing a node form using hook_form_alter so my working code (but with no effect) looks like this.
$form['field_full_name'][LANGUAGE_NONE][0]['value']['#states'] = array( 'visible' => array( ':input[name="field_person_type[und]"]'=> array( array('value' => 'Contractor'), array('value' => 'ICM'), array('value' => 'Member of public'), ), ), );
Replacing visible with expanded or collapsed has no effect so I guess these properties only apply to fieldsets, not elements. A full list of possible states can be found here.
So, is is possible to fade or slide form elements using #states?