Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Rollup cont.

Limitations Text placed directly inside the rollup container isn’t rolled up. In the example, the text
“Don’t roll me up.” doesn’t get rolled up with the rest of the FAQ. If you want text to be
rolled up, place it inside any element. It doesn’t matter whether the element is block or
inline. Also, this design pattern fails to roll up text when JavaScript isn’t available.

Tips You can insert an element specifically to be the rollup trigger, and you can place it
anywhere inside the rollup parent. In the example, I insert two spans and assign them to
the rollup-trigger class. Because these are inline elements, I use font-size and padding
to size their height and width large enough to allow a background image to show through.
This turns the span into a rollup button. Using this technique, you can put a rollup button
in front of any element. (You can also float it to the right if you want.) When the user clicks
a rollup button, everything in the rollup container rolls up except for the button and its
ancestors.
When the user clicks a rollup trigger, the JavaScript code dynamically adds or removes the
rolledup class to the element. In the example, I use the span.rolledup selector to change
the background image when the parent is rolled up. This creates a dynamic button effect.

Pattern JavaScript^
$('.rollup-trigger').click(function(e){
$(this).closest('.rollup')children().not('.rollup-
trigger').toggleClass('hidden');
$(this).parent().removeClass('hidden');
});

Related to Event Styling; Margin, Padding, Background (Chapter 6); Positioned, Absolute (Chapter 7);
Offset Absolute and Offset Fixed (Chapter 8); Font, Screenreader only (Chapter 10)