Enhanced Accordion Navigation: Grid Accordion

The Grid Accordion is an advanced accordion navigation that is built with jQuery.

It  works similar to most other accordions, only one cell is open at a time and handy for displaying detailed information about the items inside a grid.

The big thing is that the column of the current open cell expands to a reasonable reading width.

The accordion also makes use of CSS3 pseudo class selector :nth-of-type for styling the columns (which you can add extra class names to support non-CSS3-enabled browsers).

There is a beautiful demo provided which you can play with.

Grid Accordion

  • http://www.jordanwalker.net Jordan Walker

    This is a great tutorial from Chris Coyer.

  • http://www.ambitmall.com Varun

    Nice!!very useful for web designer!!

  • Prameela

    It behaves funny in IE 6. Can it be made IE6 compatible..?

  • http://www.denbagus.net denbagus

    nice accordion..