WebAppers

/ best free open source web resources /

Shopify

Grid Accordion Expands to Reasonable Width Automatically

Posted · Category: Information, License Free

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. One way to look at an accordion is like a collapsed single column of a table.

The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width.

grid-accordion

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/InfoGrid/
License: License Free

5 Comments
  • James

    It’s not exactly smooth, is it?

  • http://www.studioweber.com Alex Flueras

    That’s a nice effect! Thanks for sharing.

  • http://www.urbancool.net UrbanCool

    RE: James

    I’m sure with a little tweaking, the coder could get some jQuery easing in there to smooth it out?

    I think it’s a nice addition to my resources, for use at some point… Good job Chris Coyier @ css tricks :)

  • http://www.fedmich.com/life/ fedmich

    Its a good effect.

    I made something similar on jquery before but activates on hover of the mouse so user wont have to click on it to expand it.

    Thanks for sharing :)

  • wadada

    I was playing with Infogrid on my site(http://bit.ly/aS877j). I added a header, a footer and added some text on the last block of iron man. As you can see the footer doesn’t show up and the text of the last block is cut off. Now if you remove overflow:hidden; on the body, html the footer shows up but the text is still cut off. Any idea on how this the footer could show up without the scroll-bar (so overflow:hidden; has to stay) and how to get the text of the last block to show up entirely? Thanks in advance and have fun :)

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons