Addon ToggleReference
CSS Classes & State Attributes
The system automatically adds and removes CSS classes on each card as the cart changes. Use these classes in your stylesheet to control how cards look in each state.
CSS Classes
| Class | Applied to | When |
|---|---|---|
next-toggle-card | Each registered card | Always, on registration |
next-in-cart | A card | The package is in the cart |
next-not-in-cart | A card | The package is not in the cart |
next-selected | A card | Alias for next-in-cart |
next-active | A card | Alias for next-in-cart |
next-loading | A card | During a cart operation or price fetch |
The same next-in-cart, next-not-in-cart, and next-active classes are also applied to the card's nearest state container when one is found. See State Containers.
Example
/* Default card style */
[data-next-toggle-card] {
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 1rem;
cursor: pointer;
}
/* Card is in the cart */
.next-in-cart {
border-color: #16a34a;
background: #f0fdf4;
}
/* Card is not in the cart */
.next-not-in-cart {
opacity: 0.85;
}
/* Dim price text while loading */
.next-loading [data-next-toggle-display] {
opacity: 0.4;
}Attributes Set Automatically
For the full list of attributes set on card elements and state containers (data-next-in-cart, data-next-loading, data-in-cart, data-next-active), see the Attributes reference.
Legacy Class Names
You may see os--active in older templates. It still works and is applied alongside next-in-cart, but use next-in-cart or next-active in new stylesheets.