Show/hide fields in a form based on the value of a checkbox

Question

Is there a way to hide a specific or specifics fields in Drupal when you create content until you checked a checkbox?

Now it looks like this:

I need something like this:

But I need some checkboxes to decide if I have a certain field to show or not. Like this:

(Fieldcollection item 'some information' is showing up now because I checked the checkbox before the label)

Is there a module for this?

What would be nice is if all fields only become mandatory if you checked a checkbox.

Answer 1

Drupal 8 has a very well structured system to show hide fields based on values of other fields. It is called the Form API #states system. You can see drupal.org documentation on #states.

While defining the form you can map the visible and invisible states of the form element based on the value of another form element.

This is an example from the documentation above

$form['toggle_me'] = array(
  '#type' => 'checkbox',
  '#title' => t('Tick this box to type'),
);
$form['settings'] = array(
  '#type' => 'textfield',
  '#states' => array(
    // Only show this field when the 'toggle_me' checkbox is enabled.
    'visible' => array(
      ':input[name="toggle_me"]' => array(
        'checked' => TRUE,
      ),
    ),
  ),
);

There are other states besides visible and invisible that can be controlled through the same mechanism. Lullabot has a good article on Form API #states

Other states including making a field required is available. The full list is as follows.

enabled
disabled
required
optional
visible
invisible
checked
unchecked
expanded
collapsed

Answer 2

In Drupal 7 you can use $form #states instead of custom jQuery script. Example:

  $form['student_type'] = array(
    '#type' => 'radios',
    '#options' => array(
      'high_school'   => t('High School'),
      'undergraduate' => t('Undergraduate'),
      'graduate'      => t('Graduate'),
    ),
    '#title' => t('What type of student are you?')
  );

  // High school information.
  $form['high_school']['tests_taken'] = array(
    '#type' => 'checkboxes',
    '#options' => drupal_map_assoc(array(t('SAT'), t('ACT'))),
    '#title' => t('What standardized tests did you take?'),
    // This #states rule says that this checkboxes array will be visible only
    // when $form['student_type'] is set to t('High School').
    // It uses the jQuery selector :input[name=student_type] to choose the
    // element which triggers the behavior, and then defines the "High School"
    // value as the one that triggers visibility.
    '#states' => array(
      'visible' => array(   // action to take.
        ':input[name="student_type"]' => array('value' => 'high_school'),
      ),
    ),
  );

Answer 3

You can use module conditional fields if you want to do this node form