91ÅÝܽ

Content Management System

Home / Working in AEM / Components / Form Container Component / Advanced Form Features: Adding Toggles

Advanced Form Features: Adding Toggles

Form toggles let you show or hide parts of a form based on what the user selects.

How do toggles work?

Toggles are made up of two parts:

  1. Trigger - this is what the user interacts with (like a checkbox or radio button).
  2. Target - this is what gets shown or hidden depending on the trigger.

Each trigger and its target are connected using CSS classes.

Example Toggle Form

Select different checkboxes and radio buttons to reveal the toggled content.

Which semester are you applying for?

The application deadline for FALL 2012 has passed.

The deadline for Fall 2012 applications has already passed. Please consider applying for a future semester or contact your undergraduate advisor for more information.

The application deadline for SPRING 2013 is January 1, 2012.

In order to process your application, we recommend that you submit it prior to this date. Late applications will only be considered under extenuating circumstances.

The application deadline for FALL 2013 is May 1, 2012.

In order to process your application, we recommend that you submit it prior to this date. Late applications will only be considered under extenuating circumstances.

Have you applied for our program before?

You don't need to apply again.

Thank you for your interest. If you've applied in the past, we will have your application on file. Please contact your undergraduate supervisor to discuss your options.

Please provide us with your contact information.

Please fill out the fields below. We will contact you within 24 hours.

How to set up a toggle

Set up the trigger

  1. Navigate to the component that will act as a trigger. Components that can be triggers are: Checkbox Group, Dropdown and Radio Group.
  2. In the CSS Class field, add 
    tfc-trigger set-[unique-name]
  3. Replace [unique-name] with something unique that describes the toggle group eg. deadline
    tfc-trigger set-deadline
  4. Now go the fields where you can set options, ie. Checkboxes
  5. For each option, add
    [unique-value]=Option name
  6. [unique-value] should reflect the name of the option ie.
    fall2012=Fall 2012
  7. Repeat for each option.

Trigger example

Here is an example of a Checkbox component that has been fully set up as a trigger with three options:

Set up the target

  1. Navigate to the component that will act as the target.
  2. In the CSS Class field, add: 
    tfc-target set-[unique-name] [unique-value]
    • [unique-name] must match the trigger's name.
    • [unique-value] must match the value of the checkbox or radio button. 
      tfc-target set-deadline fall2012

Target example

Here is an example of a Text component that has been set up as a target and will show when the user selects "Fall 2012" from the checkbox:

Note: Do not mark target components as required. Hidden fields that are required can prevent users from being able to submit a form.

Applying toggles to multiple elements

A single trigger can activate multiple components. In the above form, a set of radio buttons under the "Have you applied to our program before?" heading allows the user to choose one of two options. If "Yes" is selected, they are presented with a single Text component. If "No" is selected, they are presented with a Text component as well as three Text Field components. Each of these target components has the same set of classes applied to it in the CSS Class field:

tfc-target set-prior no