Toggle CCK field visibility with CCK radio buttons

Question

I have a content type with three cck fields

1 radio button, 1 text field, and 1 integer field.

What I am trying to do is by default have the text field and integer field hidden, and only show them dependent on the state of the radio button.

Example:

Two radio buttons, one which says text and one which says integer. When the text radio box is checked, then the text box shows and the integer box is hidden and vice versa.

Answer 1

There is a contrib module written for just this: Conditional Fields. Here is a quote about it (from the module's project page):

... allows you to manage sets of dependencies between fields. When a field is “dependent”, it will only be available for editing and displayed if the state of the “dependee” field matches the right condition.

When editing a node (or any other entity type that supports fields, like users and categories), the dependent fields are dynamically modified with the States API. You can, for example, define a custom “Article teaser" field that is shown only if a "Has teaser" checkbox is checked.

Answer 2

You can use client-side javascript for this. For example, the jQuery show/hide functions can be used to expose your text and integer fields depending on the value of the radio button.

Answer 3

If you're happy doing a very small amount of coding, then this can be achieved in a way that is far more lightweight than using the conditional fields module.

In a custom module you can implement hook_form_alter() or hook_form_FORM_ID_alter() and use the states api to add the visibility rules. You don't actually need to program the logic for hiding / displaying the fields, just define which values to use:

/**
 * Implements hook_form_FORM_ID_alter().
 */
function MODULENAME_form_CONTENTTYPENAME_node_form_alter(&$form, &$form_state) {
  $form['text_field']['#states'] = array(
    'visible' => array(
      ':input[name="radio_field"]' => array('value' => 'value_of_textfield_option'),
    ),
  );    

  $form['integar_field']['#states'] = array(
    'visible' => array(
      ':input[name="radio_field"]' => array('value' => 'value_of_integarfield_option'),
    ),
  );
}