Toggle

This provides a toggle component

Required classes

Util-cssToggle, Util-cssToggleLabel, Toggle-expanded, Toggle-collapsed

Remarks

• The id of .Util-cssToggle must be uniq and match the for attribute of .Util-cssToggleLabel
• CSS is not included, you might reference to the .Content style in the example given below

liquid

<input class="Util-cssToggle" type="checkbox" name="Promotion-tags-toggle" id="ui-toggle-id" />
<div class="Content">content</div>
<label class="Util-cssToggleLabel" for="Promotion-tags-toggle">
  <span class="Toggle-expanded">+</span>
  <span class="Toggle-collapsed">-</span>
</label>

css

#ui-toggle-id ~ .Content {
  display: none;
}

#ui-toggle-id:checked ~ .Content {
  display: block;
}