Caution – this involves adding hidden css to your backpack page – it works for me in the current form although in some testing I ended up with an unusable page in Safari—when I opened it in Firefox I was able to delete the dividers where I had hidden the CSS & which were breaking the page.

This relies on the -webkit-transition feature added in Safari 3.1 for a smooth animation.

1) create a new list. call it “styles” and drag it to the bottom of the page where it won’t be obtrusive later on.

2) add a new item to the list with the following content:

collapsible<style>p.collapsible {width: 100px; height:20px; align:left; background: khaki; overflow:hidden; border: 0px solid white; font-size: xx-small; -webkit-transition: all 1s ease-in-out} p.collapsible:hover {background:white; width: 600px; height: 200px; font-size: medium}</style>

2a) leave the list alone from now on.

3) when you want to create a collapsible note, surround it with a paragraph tag indicating the class

e.g.

And….for something even cooler, this works with iframes, so you can embed other web sites in a collapsed form on your backpack pages

Follow the same steps, but in step 2 above, substitute

collapsible iframe<style>iframe.collapsible {width: 100px; height:40px; align:left; background: khaki; overflow:hidden; border: 0px solid white; font-size: xx-small; -webkit-transition: all 1s ease-in-out} iframe.collapsible:hover {background:white; width: 650px; height: 800px; font-size: medium}</style>

and for step 3, use an iframe tag like

... use an iframe tag like <iframe class="collapsible" src="http://www.google.com" height="500" width="600"></iframe>

To achieve borderless iframe rendering in IE may require a frameborder=”no” attribute on the iframe tag.