CSS is great for interactions as well as layout, especially when combined with JavaScript. For example, a traditional design for a FAQ page consists of a list of “Question” links that each point to an “Answer” on a different page (or worse, an anchor within another page). It’s much more user-friendly to keep all the information on one page, and to allow the user to hide and reveal the details when she wishes (see expand/collapse a layer).

Here are a few techniques that I use a lot in my design work. Each link points to a demo page where I illustrate the technique and provide a few simple instructions. Credit is given to all sources. To find the code, just open the page in your browser and choose View > Page Source.

• Sort a table using row headers
• Make a whole table row into a hyperlink
• CSS tooltips
• Expand/collapse a list
• Expand/collapse a layer