20

Advanced Toggle Patterns

Complex state cycling and conditional toggles

Multi-State Cycles

Cycle through 3+ states using toggle() with multiple arguments

Theme Selector (3-state cycle)

Current theme:

Click button to cycle: light → dark → auto

Button text changes based on current state using .switch() method

Document Workflow (4-state)

Status:

Workflow: draft → review → approved → published → draft...

Connection Status Indicator

Status:

Cycle through connection states with visual feedback

Conditional Toggles

Toggle behavior that changes based on other conditions

Role-Based Access Control

Feature toggle only works for editor/admin roles

Notification Preferences

All notifications disabled
Email notifications only
Push notifications only
Both email and push notifications

Cycles: none → email → push → both → none...

Special Patterns

Handling edge cases and special toggle scenarios

Priority Levels with Animation

Current priority:

Notice the 'urgent' state pulses!

The urgent state includes a CSS pulse animation

Numeric State Cycling

🥉 Bronze level
🥈 Silver level
🥇 Gold level

Cycles through numbers: 1 → 2 → 3 → 1...

Enhanced Boolean Toggle

✨ This content is visible!
Content is hidden

Boolean toggle with custom string values instead of true/false

Advanced Patterns

Complex toggle patterns for real-world applications

Toggle with Side Effects

Check browser console for logging

Combine toggle with logging, analytics, or other actions

Validated State Changes

Status:
⚠️ Published documents cannot be changed via normal workflow

Prevent invalid state transitions with conditional logic