SASS Toggles

Source lesson: sass/toggles

Toggle anatomy: ocs__toggle (the <label> wrapper) → ocs__toggle-input (the hidden checkbox that stores on/off) → ocs__toggle-track (the visible switch) → ocs__toggle-label (the text). ocs__toggle--green sets the checked color.

Popcorn Hack: Fill in the Blanks

  1. The checkbox on a toggle keeps track of whether it is on or off.
  2. The slider is the visible part of the toggle that changes color when it is turned on.
  3. The .switch class controls the toggle’s position, size, padding, and alignment.
  4. The border-radius property makes the slider have rounded edges.
  5. The &:before rule dictates the white circle of the toggle.

Find the Bug

The track <span> had an empty class="", so the visible switch never rendered. Adding ocs__toggle-track fixes it. aria-hidden="true" is there because the track is decoration only: screen readers announce the checkbox and its label instead.

Customize the Toggle

The lesson’s color runner, changed from green #22C55E to purple #8B5CF6. This <style> is the lesson’s own starter, the one place the lesson asks for a hex edit.

Homework: Parade-Day Settings Panel

Four toggles, each with its own label and its own job on the page:

Toggle What it does when ON
Show parade schedule reveals the schedule list
Show volunteer tips reveals the tips paragraph
Show route map note reveals the route note
Compact view hides every optional section at once (it overrides the other three)

A live counter shows how many toggles are on and updates on every flip. The JavaScript only reads .checked and sets .hidden, so all the styling still comes from the OCS classes.

  • 7:30 AM: Float line-up
  • 9:00 AM: Parade starts on Poway Road
  • 11:00 AM: Community picnic

Volunteer tip: wear sunscreen, bring water, and check in at the Rotary tent.

Route note: the parade runs west on Poway Road from Community Park to Midland Road.

  • 7:30 AM: Float line-up
  • 9:00 AM: Parade starts on Poway Road
  • 11:00 AM: Community picnic

Volunteer tip: wear sunscreen, bring water, and check in at the Rotary tent.

Route note: the parade runs west on Poway Road from Community Park to Midland Road.

Tested states: at load only the schedule is on, so the counter reads “Toggles on: 1 of 4” and only the schedule shows. Turning on tips and route shows all three sections, 3 of 4. Turning on compact view hides all three sections even though their toggles are still on, 4 of 4. Turning everything off gives 0 of 4 and nothing shows.

What I learned: the toggle is a styled checkbox. ocs__toggle-track only looks like a switch, and the real state lives in the hidden <input>. That’s why :checked in the SCSS and .checked in JavaScript read the same thing. It’s AP CSP selection: the checkbox is a Boolean, and if (t.checked) picks a branch.