Codelab: Show/Hide Toggle
Toggle element visibility with CSS classes — compare display: none and visibility: hidden.
Set up your project
Time to explore how CSS can make elements appear and disappear. In this codelab, you'll build a movie review page where spoilers are hidden by default. This teaches a pattern used everywhere on the web: FAQ accordions, cookie banners, mobile menus, and notification dismissals. Every time you see content appear or disappear on a website — a dropdown opening, a toast notification fading in, a modal dialog popping up — CSS visibility control is doing the work.
Open a terminal (Ctrl + Alt + T on Linux) and type the following commands one at a time, pressing Enter after each:
- mkdir ~/show-hide-lab — Creates a new folder called show-hide-lab. mkdir stands for "make directory" (a directory is just another word for folder). The ~ symbol is a shortcut that means "my home folder" — so the new folder lands right inside your personal files.
- cd ~/show-hide-lab — Moves into the new folder. cd stands for "change directory." From now on, any files you create will land inside show-hide-lab.
- touch index.html style.css — Creates two empty files: one for HTML structure and one for CSS styles. touch creates a file if it doesn't already exist.
- code . — Opens VS Code with this folder loaded. The . (dot) means "the folder I'm currently in." VS Code will open and show your two new files in the sidebar.
You should see index.html and style.css in the VS Code sidebar, ready for editing. That's your workspace — two files, one project, and a pattern you'll use on every website you build.