ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
Your markup will consist of a container div, a checkbox input, and an inner div containing some content,
per Listing 4-33.
Listing 4-33. Checkbox Markup to Open and Close an Associated div

■ Note While the techniques I’ll discuss next are valid in html5 (which allows you to place form elements
anywhere on a page), they are semantically questionable. there is a school of thought that claims that form
elements should only be used within forms, and that these kinds of behaviors should be relegated exclusively to
JavaScript. You should be aware of this contention before proceeding with the following techniques.
Next, I will demonstrate how to achieve the image shown in Figure 4-8.
Figure 4-8. An image and description of Mars shown with an element clicked (image courtesy of NASA)