5

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' => '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?

1

Please try this. may be it will help you.

**Your 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),
    ),
  ),
);

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' => 'fieldset',
                          '#title' => t('Additional Information'),
                          '#collapsible' => TRUE,
                          '#collapsed' => TRUE,
                     );

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

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

0

You miss understand this concept, I think, In your code

$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'),
        ),     
    ),
);

you have written for, It means when the field "field_persion_type[und]" value is "Contractor or ICM or Member of public" then only the $form['field_full_name'][LANGUAGE_NONE][0]['value'] field will be visible

$form['field_persion_type']['und'] = array(
  '#states' = array(
    'expanded' => array(
      // we could set with field id
      // '#id-of-field' => array('checked' => TRUE),
      ':input[name="field_full_name"]' => array('checked' => TRUE),
     ),
   ),
);

So now if the field_full_name selected the field_persion_type field will be expand..

  • Yes, I understand. field_person_type is a series of radio buttons. If the value is Contractor or ICM or Member of public then the field_full_name will be visible. My question concerns how to animate the field appearing / disappearing. – Felix Eve Jul 7 '15 at 23:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.