- const DOLLS = 5
form.dolls
  - let d = 0
  while d < DOLLS
    - if (d !== (DOLLS - 1))
      input(id=`doll--${d}`, type='checkbox')
    - let labelValue = `Doll label ${d} (Click to show next)`
    label(for=`doll--${d}`, style=`${d === 0 ? 'display: block;' : ''}`)= labelValue
    - d++
  input(type="reset", id="reset")
  label(for="reset") Reset
View Compiled
body
  align-items center
  background #fafafa
  display flex
  justify-content center
  min-height 100vh
  transform-style preserve-3d
  
label
  display none
  margin-bottom 1rem
  
[type='checkbox']
[type='reset']
  display none
  
[for='reset']
  display block
  margin-top 2rem

label
  cursor pointer
  
input:checked + label + input + label
  display block

  

 
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.