jQuery Toggle Fields

Adds form logic to hide form fields.

Examples

To initialise the plugin

    $('form').toggleFields();

Example A

Toggling a single field

Markup

<form>
    <i aria-hidden data-toggle-conditions="#demo_example_field_1"></i>
    <label for="label_id_1">Select an option</label>
    <select id="label_id_1" data-toggle-target>
        <option>---------</option>
        <option id="demo_example_field_1">foo</option>
    </select>
    <div data-toggle-next data-toggle-ref="demo_example_field_1">
        <label data-toggle-target for="label_id_2">An additional field</label>
        <select id="label_id_2" data-toggle-target>
            <option>---------</option>
        </select>
    </div>
</form>
<script>
    $('form').toggleFields();
</script>

Rendered

Example B

Toggling multiple fields at a time

Markup

<body data-toggle-conditions="#demo_example_field_2">
<form>
    <i aria-hidden data-toggle-conditions="#demo_example_field_2"></i>
    <label for="label_id_3"><input id="label_id_3" checked="checked" name="fieldset_1" type="radio"> No</label>
    <label for="demo_example_field_2"><input id="demo_example_field_2" name="fieldset_1" type="radio"> Yes</label>
    <div data-toggle-next data-toggle-ref="demo_example_field_2">
        <label data-toggle-target for="label_id_5">An additional field</label>
        <select id="label_id_5" data-toggle-target>
            <option>---------</option>
        </select>
    </div>
    <div data-toggle-next data-toggle-ref="demo_example_field_2">
        <label data-toggle-target for="label_id_6">Another additional field</label>
        <input data-toggle-target id="label_id_6" type="text">
    </div>
</form>
<script>
    $('form').toggleFields();
</script>

Rendered

Example C

Recursive toggle.

Markup

<form>
    <i aria-hidden data-toggle-conditions="#demo_example_field_3, #demo_example_field_4, #demo_example_field_5"></i>
    <label for="label_id_7">First toggle</label>
    <select id="label_id_7" data-toggle-target>
        <option>---------</option>
        <option id="demo_example_field_3">foo</option>
    </select>
    <div data-toggle-next data-toggle-ref="demo_example_field_3" data-toggle-recursive>
        <label data-toggle-target for="label_id_8">Second toggle</label>
        <select id="label_id_8" data-toggle-target>
            <option>---------</option>
            <option id="demo_example_field_4">bar</option>
        </select>
    </div>
    <div data-toggle-next data-toggle-ref="demo_example_field_4" data-toggle-recursive>
        <label data-toggle-target for="label_id_9">Third toggle</label>
        <select id="label_id_9" data-toggle-target>
            <option>---------</option>
            <option id="demo_example_field_5">bar</option>
        </select>
    </div>
    <div data-toggle-next data-toggle-ref="demo_example_field_5" data-toggle-recursive>
        <p>Foo paragraph that belongs to the third toggle.</p>
    </div>
</form>
<script>
    $('form').toggleFields();
</script>

Rendered

Foo paragraph that belongs to the third toggle.

Example D

Checkbox example

Markup

<form>
    <i aria-hidden data-toggle-conditions="#demo_example_field_6"></i>
    <label for="demo_example_field_6">
        <input id="demo_example_field_6" checked type="checkbox"> No
    </label>
    <div data-toggle-next data-toggle-ref="demo_example_field_6">
        <label data-toggle-target for="label_id_9">An additional field</label>
        <select id="label_id_9" data-toggle-target>
            <option>---------</option>
        </select>
    </div>
</form>
<script>
    $('form').toggleFields();
</script>

Rendered

Example E

Field with help text example

Markup

<form>
    <i aria-hidden data-toggle-conditions="#demo_example_field_7"></i>
    <label for="label_id_10">Select an option</label>
    <select id="label_id_10" data-toggle-target>
        <option>---------</option>
        <option id="demo_example_field_7">foo</option>
    </select>
    <div data-toggle-next data-toggle-ref="demo_example_field_7">
        <label data-toggle-target for="label_id_11">Email address</label>
        <input data-toggle-target aria-describedby="instructions_id_1" id="label_id_11" type="text" />
        <p id="instructions_id_1" class="form-row__instructions">For example: name@example.com</p>
    </div>
</form>
<script>
    $('form').toggleFields();
</script>

Rendered

For example: name@example.com

Example F

Destroy method

Markup

<form id="destroyMethod">
    <i aria-hidden data-toggle-conditions="#demo_example_field_8"></i>
    <label for="label_id_11">Select an option</label>
    <select id="label_id_11" data-toggle-target>
        <option>---------</option>
        <option id="demo_example_field_8">foo</option>
    </select>
    <div data-toggle-next data-toggle-ref="demo_example_field_8">
        <label data-toggle-target for="label_id_12">Email address</label>
        <input data-toggle-target aria-describedby="instructions_id_2" id="label_id_12" type="text" />
        <p id="instructions_id_2" class="form-row__instructions">For example: name@example.com</p>
    </div>
</form>
<script>
    var form = $('form');

    form
        // init
        .toggleFields()
        // destroy
        .data('plugin_toggleFields').destroy();
</script>

Rendered

For example: name@example.com