Note: while Puzzle.js puzzles store their state locally (via localStorage), that behavior is inhibited on this page to make it easiest to see exactly what markup produces exactly what result.
Some puzzles want to toggle things: clues that have or have not been used, statements that are true or false, etc. Puzzle.js can easily create interactivity for these scenarios, with automatic undo/redo and state-saving support.
To mark a single item as being toggleable, set puzzle-toggle-item on the class. To mark an entire list of items as toggleable, set puzzle-toggle-list on the class. Note as well that the example below has no grid; this demonstrates that toggles can be used without any grid at all, if desired.
Each toggle item needs an ID so its state can be persisted. These IDs are dynamically assigned by default based on the items’ positions within the puzzle, which could cause issues if your set of toggleable items changes over time. If you need an ID to be stable, you can set data-toggle-id on your item or list.