04 show hide

View the source code.

This page displays a red box that contains a recipe. The recipe has two steps, each with a check box. If a box is checked, the details for that step are hidden. If the box is not checked, the details are visible.

The details of a step are in a <div> element. We show or hide the <div> by its style.display property.

document.getElementById("dry").style.display = "none";