ZoomGrid is a grid which can zoom its cells. In other words, it's a two-dimensional accordion menu inside a fixed rectangle.
If you're looking for a traditional accordion that expands both vertically and horizontally, you should have a look at InfoGrid.
Another great alternative are Rotating Blocks (almost pure CSS 3).
Latest version: ZoomGrid.js.
ZoomGridTransparency.js - make cells transparent
ZoomGridHighlight.js - add highlighting
ZoomGridFrame.js - add ornament frames around each cell
ZoomGridMaxChildWidth.js - maximize width of child elements
ZoomGridDisableFoldedLinks.js - disable links in folded cells
ZoomGridUnfocusedHide.js - hide contents of unfocused cells
ZoomGridRestoreButton.js - show a button to unfocus all cells
ZoomGridContainerFade.js - fade out unfocused grid when mouse is inactive
Those files are uncompressed. To get production libraries, use a compressor.
The development version is available on
You may easily clone the project by running:
$ git clone git://github.com/markusfisch/ZoomGrid
How to use
Copy ZoomGrid.js (along with any optional extension) into your web folder and add a corresponding <script/> tag for each file to the <head/> element of your page.
Then invoke the grid:
In this case, you should have a <div id="Contents"/> somewhere on your page, of course.
After that, you need to activate the extensions you want to use. For example, to activate the transparency extension do:
z.addTransparency(); --> </script>
Some extensions may require attributes. Just look at the corresponding source file. For a full sample see DemoZoomGrid.js.
ZoomGrid is Public Domain.