Tom Tom - 29 days ago 12
CSS Question

Little folding triangles: how can I create collapsible sections on a webpage?

Some webpages have a "turning" triangle control that can collapse submenus. I want the same sort of behavior, but for sections in a form.

Say I had a form that had lender, name, address and city inputs. Some of my site's users are going to need a second set of these fields. I would like to conceal the extra fields for the majority of the users. The ones that need the extra fields should be able to access them with one click. How would I do that?

Answer Source

Ah, I think you mean you want to have collapsible sections on your form.

In short:

  1. Put the content you want to collapse in its own DIV, with the CSS property of "display:none" at first
  2. Wrap a link (A tag) around the triangle image (or text like "Hide/Show") that runs the JavaScript to toggle the display property.
  3. If you want the triangle to "turn" when the section is expanded/shown, you can have the JavaScript swap out the image at the same time.

Here's a better explanation: How to Create a Collapsible DIV with Javascript and CSS [Update 2013-01-27 the article is no longer available on the Web, you can refer to the source of this HTML page for an applied example inspired by this article]

Or if you Google search with words like "CSS collapsing sections" or such you will find many other tutorials, including super-fancy ones (e.g. http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx).