Form Expandable
This is the Form Expandable component. It allows a checkbox or radio element to expand a child container. This is a pure CSS solution with no JS dependency.
Usage:
- Add
.form-expandable__src
to the radio or checkbox. - On the same level add
.form-expandable__container
to the container element of the element you'd like to toggle. - Finally add
.form-expandable__target
to the element you would like to toggle. - The
.form-expandable__content
class adds additional padding for nested elements.
Example:
<input class="form-expandable__src" type="radio">
...
<div class="form-expandable__container">
...
<div class="form-expandable__target">
<div class="form-expandable__content">
Content that will be expanded.
</div>
</div>
</div>
{{ attach_library('theme_name/form-expandable') }}
<div class="form-expandable">
{% include '@h4h_theme/hr/hr.twig' with {
modifier_class: 'hr--hot-orange hr--mb'
} only
%}
<fieldset class="form-item form-control {{modifier_class}}">
<legend class="form-item__label form-item__legend form-item__legend--secondary">Optional Details</legend>
<div class="form-control__item">
<label class="form-control__label" for="{{ id|default('inHonor-' ~ modifier_class ) }}">
<input class="form-control__el form-expandable__src" type="checkbox" name="optionalDetails" value="inHonor" id="{{ id|default('inHonor-' ~ modifier_class ) }}">
<div class="form-control__indicator form-control__indicator--checkbox"></div>
<div class="form-control__desc form-expandable__container">Donate in honor of someone and send a personalized card
<div class="form-control__details">Minimum donation: $10</div>
<div class="form-expandable__target">
<div class="form-expandable__content">
{% include '@h4h_theme/info/info.twig' with {
modifier_class: 'info--full',
icon: 'info',
label: info_full.label,
description: info_full.description
} only
%}
</div>
</div>
</div>
</label>
</div>
<div class="form-control__item">
<label class="form-control__label" for="{{ id|default('designate-' ~ modifier_class ) }}">
<input class="form-control__el form-expandable__src" type="checkbox" name="optionalDetails" value="designate" id="{{ id|default('designate-' ~ modifier_class ) }}">
<div class="form-control__indicator form-control__indicator--checkbox"></div>
<div class="form-control__desc form-expandable__container">
Designate your donation
<div class="form-control__details">Your gift will go where it is needed most, unless you specify a particular location or cause for it to be used.</div>
<div class="form-expandable__target">
<div class="form-expandable__content">
<fieldset class="form-item form-control">
<legend class="form-item__label form-item__legend">Your Designation</legend>
{% for item in radio.items %}
<div class="form-control__item">
<label class="form-control__label" for="{{ id|default('expandable-' ~ loop.index ) }}">
<input class="form-control__el form-expandable__src" type="radio" name="donateFrequency" value="monthly" id="{{ id|default('expandable-' ~ loop.index ) }}" required>
<div class="form-control__indicator form-control__indicator--radio"></div>
<div class="form-control__desc form-expandable__container">
{{ item.text }}
<div class="form-expandable__target">
<div class="form-expandable__content">
Expanded description with more information.
</div>
</div>
</div>
</label>
</div>
{% endfor %}
</fieldset>
<div class="form-control__details">{{ disclaimer }}</div>
</div>
</div>
</div>
</label>
</div>
</fieldset>
{% include '@h4h_theme/hr/hr.twig' with {
modifier_class: 'hr--hot-orange'
} only
%}
</div>