#states with effects (fade, slide) 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 however I found it too buggy to use.

This live example from the examples module shows the Additional Information section sliding up and down when the checkbox value is changed.

The code used to achieve this:

$form['more_info'] = array(
  '#type' =&gt; 'fieldset',
  '#title' =&gt; t('Additional Information'),
  '#collapsible' =&gt; TRUE,
  '#collapsed' =&gt; TRUE,

  // Expand the expand_more_info fieldset if the box is checked.
  '#states' =&gt; array(
    'expanded' =&gt; array(
      ':input[name="expand_more_info"]' =&gt; array('checked' =&gt; 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' =&gt; array(
        ':input[name="field_person_type[und]"]'=&gt; array(
            array('value' =&gt; 'Contractor'),
            array('value' =&gt; 'ICM'),
            array('value' =&gt; '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?
Please try this. may be it will help you.

**Your Code:**
$form['more_info'] = array(
  '#type' =&gt; 'fieldset',
  '#title' =&gt; t('Additional Information'),
  '#collapsible' =&gt; TRUE,
  '#collapsed' =&gt; TRUE,

  // Expand the expand_more_info fieldset if the box is checked.
  '#states' =&gt; array(
    'expanded' =&gt; array(
      ':input[name="expand_more_info"]' =&gt; array('checked' =&gt; TRUE),
    ),
  ),
);


Instead of that you can try it in another way which is mentioned below in hook_form_alter() function.

Example:

$form['more_info'] = array(
                          '#type' =&gt; 'fieldset',
                          '#title' =&gt; t('Additional Information'),
                          '#collapsible' =&gt; TRUE,
                          '#collapsed' =&gt; TRUE,
                     );

**$form['more_info']['und']['#states']**= array(
                                'expanded' =&gt; array(
                                 ':input[**name="expand_more_info[und]**"]' =&gt; array('checked' =&gt; TRUE),
                                ),
                             );


Note: you can use 'visible' instead of 'expanded'.
you can try this in your custom module or template.php