---
updatedAt: 2025-04-23T20:20:19.000Z
agentTools:
  projectIndex: https://shopline-layout.readme.io/llms.txt
---

# 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 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>
```

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

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