Toggle a CSS Class

DOM & Eventsmedium

Course · Section 7: JavaScript in the Browser: DOM and Events · Lecture 76: Selecting and Manipulating Elements

The page has `<div id="box" class="hidden">Hello</div>`. Write JavaScript that removes the `hidden` class from `#box` and adds the class `visible`.

Input: #box does not have class 'hidden'

Output: assertion passes

Input: #box has class 'visible'

Output: assertion passes

Common pitfalls

Manually checking and editing className is more error-prone than classList.toggle.

Approach & explanation (try first)

classList.toggle flips the presence of a class in one call.

⌘/Ctrl + Enter

Run your code to see results.

DOM & Eventsmedium

Course · Section 7: JavaScript in the Browser: DOM and Events · Lecture 76: Selecting and Manipulating Elements

The page has `<div id="box" class="hidden">Hello</div>`. Write JavaScript that removes the `hidden` class from `#box` and adds the class `visible`.

Input: #box does not have class 'hidden'

Output: assertion passes

Input: #box has class 'visible'

Output: assertion passes

Common pitfalls

Manually checking and editing className is more error-prone than classList.toggle.

Approach & explanation (try first)

classList.toggle flips the presence of a class in one call.

⌘/Ctrl + Enter

Run your code to see results.