Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Rollup

HTML

<h1>Rollup</h1>

<div id="main" class="rollup">

<h2 class="rollup-trigger">Main</h2>

<div id="faq"><div class="oi rollup">

<h3 class="rollup-trigger">FAQ</h3> Don't roll me up.

<dl class="rollup">

<dt class="rollup-trigger">QUESTION: How do rollups work?</dt>

<dd class="hidden">ANSWER: When the user clicks on a heading or button,

the content rolls up or down. </dd></dl></div></div>

<div id="info"><div class="oi rollup">

<h3 class="rollup-trigger">Info</h3>

<div class="rollup">

<p><span class="rollup-trigger"> </span>List</p>

<ul> <li>list item 1</li> <li>list item 2</li></ul></div>

<em><span class="rollup-trigger"> </span>Roll me up</em></div></div>

<div class="float-divider"></div></div>

CSS

.rollup-trigger { cursor:pointer; }

.rollup-trigger:hover { color:firebrick; }

span.rollup-trigger { font-size:0.65em; padding-left:8px;

background:url("hide.gif") no-repeat left top; }

span.rolledup { background:url("show.gif") no-repeat left top; }

.hidden { position:absolute; top:-99999px; left:-99999px;

width:1px; height:1px; overflow:hidden; }

/* Nonessential rules are not shown. */