Input Toggle

Use this extension to toggle secondary fields in a form.

By default this extension is enabled in your core Genesis installation. This extension is apart of the HTMLFormValidation class which adds the features to all inputs with the type of password.

Installation

You can simply import the form-validation extension, this will automatically initialize and look for any inputs that have the class js-input-toggle assigned to them.

Usage

.mvt

First, add the #css js-input-toggle class and the aria-controls tag to the input that will be used to trigger the visibility of the secondary form fields. For the aria-controls tag, make sure that the value is set to the id of the container that will be toggled. For the form fields that will be toggled, wrap them in a container with a unique id. Then give the class of u-hidden to hide the form fields from displaying initially and add the aria-hidden tag with a value of true. Optionally, add the following data tags to the same input to declare some rules:

Data Tag	Description
input-toggle-condition	Use this to set a value that will trigger the container's visibility
input-toggle-reset	Set this to "true" if you need the toggled container's form fields to reset when hidden

See the full example below:

<div class="g-layout">
    <div class="g-layout__item g-form-list__item u-width-12 u-width-6--m">
        <label class="g-form-label" for="l-hear_about_us">How Did Your Hear About Us</label>
        <div class="g-form-select">
            <select id="l-hear_about_us" class="js-input-toggle g-form-select__dropdown" aria-controls="hear-about-us-field" data-input-toggle-condition="other" data-input-toggle-reset="true" name="hearAboutUs">
                <option value="">Select One</option>
                <option value="1">Family/Friend</option>
                <option value="2">Pluto TV</option>
                <option value="4">Social Media</option>
                <option value="other">Other</option>
            </select>
        </div>
    </div>
    <div id="hear-about-us-field" class="g-layout__item g-form-list__item u-width-12 u-width-6--m u-hidden" aria-hidden="true">
        <label class="g-form-label is-required" for="l-hear-about-us-other">Other</label>
        <input id="l-hear-about-us-other" class="g-form-input" type="text" name="hearAboutUsOther" value="&mvte:global:hearAboutUsOther;" placeholder="Where did you hear about us?" required />
    </div>
</div>

In the example usage above, the select dropdown menu for "How Did You Hear About Us?", will toggle the secondary field for "Other" if the "other" option is selected.