CHAPTER 17 ■ LAYOUTSRollup
Problem You want the user to dynamically interact with sections, FAQs, lists, and so forth by rolling
them up to hide information and rolling them down to show information. You want to do
this without adding code to the HTML document. You want to use styles to control the
dynamic behavior.
Solution You can add the rollup class to any parent element. This identifies it as a container that
can roll up its content. You can add the rollup-trigger class to any child in the rollup
container. When the user clicks the rollup-trigger element, all content in the rollup
element rolls up except for the rollup-trigger element. When the user clicks the rollup-
trigger element again, the content rolls down.
The rollup class is typically assigned to a section’s container, and the rollup-trigger
class is typically assigned to a section’s heading. In the example, I assigned the rollup class
to each section and the rollup-trigger class to each section heading. You can click a
heading to roll up or roll down each section.
The rollup-trigger class can be assigned to any descendant of the rollup container. In
the example, I assign it to the dictionary term,
- , is its rollup container.
- .
When you want a child of a rollup container to start out rolled up, you can set it to the
hidden class. In the example, the dictionary definition element is set to hidden so it starts
out rolled up when the page loads.
This design pattern rolls up elements by setting them to hidden. It rolls them down by
removing hidden from their class. The hidden class is styled using the Screenreader-only
design pattern (Chapter 10), which hides elements on the screen without hiding them from
screen readers.
Pattern^
HTML
CONTENT
CSS .rollup-trigger { cursor:pointer; }
.rollup-trigger:hover { STYLES }
span.rollup-trigger { font-size:VALUE; padding-left:VALUE;
background:url("FILE.EXT") no-repeat; }
span.rolledup { background:url("FILE.EXT") no-repeat; }
.hidden { position:absolute;
top:-99999px; left:-99999px;
width:1px; height:1px; overflow:hidden; }
Location This pattern works anywhere.
You can click the dictionary term to roll up and roll down the dictionary definition,