Web design - show/hide content - know any good examples? Looking for design, not code

February 1, 2012 9:36 PM

I'd like a web designer to style (in CSS) shown/hidden content on our new website. But I'm having trouble finding good examples.

Can anyone point to any sites that will hide a bunch of content, and reveal it with a button, and do it really well?

For example, how do you show the user that the content, currently shown, can be hidden? Could you put it in a box? Put a vertical line along the left? What should the show/hide icon look like? Would it be next to a text label? Should that label look like a heading?

Please not that I'm not after code examples. I know we'll need javascript to make it work, and all Google returns is code examples, so my only option (other than MeFi) is to trawl random sites in the hope they have some hideable content.

Thanks.

posted by fonetik to Computers & Internet (6 answers total)

The most common UI I've seen puts an arrow icon that can be rotated to show/hide content. See this example from JQuery UI.
posted by Paragon at 9:40 PM on February 1, 2012

What paragon said. If the accordion in jQuery UI doesn't work (for example, if you need multiple bits open at once), the show/hide code at the bottom of the UI Accordion demo is champion.

A +/- pair or rotating arrow works really well. You might also consider a hover state on the element that will show/hide to indicate to the user that the element is a clickable item.
posted by fifteen schnitzengruben is my limit at 10:02 PM on February 1, 2012

A lot of forums do this pretty well. Here's an extremely nerdy example: http://forums.mtgsalvation.com/showthread.php?t=364252

You need to scroll down about two screenfuls before you'll see it. I like the elegance of the box with the slightly different background colour and the simple "show/hide" html form button.
posted by 256 at 10:13 PM on February 1, 2012

You're asking for "design patterns" about progressive disclosure. you may find a few patterns useful:

Accordion
Progressive Disclosure: Usage Controls
Closable Panels
Progressive Disclosure
Expand Transition

You might also find the UX StackExchange useful for discussions of "UX" or user experience, without all that nasty code. :-)
posted by artlung at 10:35 PM on February 1, 2012

It sounds like you're looking more for UI / design ideas than code ideas. For that kind of thing, I turn to Dribble. Lots of design snippets, some linked to live projects and some not. Try searching for "accordion", "content", and maybe even "read more".
posted by geeky at 1:37 PM on February 2, 2012

Thanks all, this has given me some useful leads.

Much appreciated.
posted by fonetik at 2:05 PM on February 2, 2012