<h2>Creating an animated panel using transitions</h2>

<p>

This example shows an animated modal form.

<button id="openButton">Open Panel</button>

</p>

<p>

Now let's fill this space with some text so that the modality kicks in.

</p>

<p>

Vestibulum quis purus metus. Quisque in adipiscing erat. Class aptent taciti

sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In vitae

lacus tellus, non iaculis arcu. Donec nec risus diam. Vivamus sed mauris eros,

nec ultrices nibh. Phasellus scelerisque aliquet mauris, faucibus aliquam ipsum

tempor quis. Integer quis risus sed tellus ornare venenatis quis ut magna.

Integer erat mauris, hendrerit faucibus iaculis eu, feugiat vitae massa. Aliquam

mi augue, tincidunt id porttitor ut, lacinia sed eros. Vestibulum ante ipsum

primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum

fringilla urna vel cursus. Etiam et suscipit eros. In ornare lacinia est, sed

bibendum ligula blandit nec. Vestibulum tristique pulvinar nunc, quis lacinia

eros facilisis vel. Duis tristique porttitor risus, vel laoreet ligula mollis

vitae. Nam ornare justo a turpis mattis cursus.

</p>

<div id="panelContent">

<div class="yui3-widget-hd">

Showing an animated panel

</div>

<div class="yui3-widget-bd">

<p>Making panels animate is easy with the "transition" module!</p>

</div>

</div>