Stagehand

Example 3: Toggling classes and IDs instead of visibility

Oftentimes you'll want to toggle a class or ID rather than just visibility of an element. Piece of cake:

Example output

(Click on the Stagehand icon in the upper left to toggle the toolbar)

Source code

<div data-stage data-scene='first item' data-scene-id='ugly'>
  I get an id of 'ugly' when the 'first item' scene is active
</div>

<div data-stage data-scene='other item' data-scene-class='highlighted'>
  I get a class of 'highlighted' when the 'other item' scene is active
</div>

<div data-stage data-scene='last item' data-scene-class='highlighted' data-scene-id='ugly'>
  I get an id of 'ugly' and a class of 'highlighted' when the 'last item' scene is active
</div>