Grid Accordion Expands to Reasonable Width Automatically
24 Mar
Posted by Ray Cheung as 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.
Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/InfoGrid/
License: License Free
- Brushes (11)
- Buttons (21)
- Color Schemes (22)
- Fonts (39)
- Forms (95)
- Icons (84)
- Patterns (24)
- PS Tutorials (9)
- Stock Photos (19)
- Tables (23)
- Announcement (70)
- Best Collections (4)
- Code (44)
- eCommerce (19)
- Framework (157)
- Hosting (12)
- Information (161)
- Inspiration (27)
- Legal Documents (8)
- Reviews (8)
- Security (13)
- Social (19)
- Sound (12)
- Stats (32)
- Tools (192)
- Webmail (13)
- BSD License (51)
- CC License (111)
- GPL License (189)
- LGPL License (37)
- License Free (585)
- MIT License (276)
Search Site
Open Source Resources for You
What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.
© Copyright 2010 WebAppers
Sponsored by NetDNA Content Delivery Network
Recommended Books for Web Developers
It’s not exactly smooth, is it?
That’s a nice effect! Thanks for sharing.
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
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
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
RSS feed for comments on this post · TrackBack URI