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

  • This is a great tutorial from Chris Coyer.

  • Nice!!very useful for web designer!!

  • Prameela

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

  • nice accordion..