Welcome to WebmasterWorld Guest from 18.206.168.65

Forum Moderators: open

Message Too Old, No Replies

How to collapse/expand HTML sections?

     
11:31 pm on Mar 24, 2006 (gmt 0)

New User

10+ Year Member

joined:Mar 23, 2006
posts:22
votes: 0


I'd like to know how to create a collapsible HTML section, like what MS do at [live.com...]

What techniques are used to create this type of functionality? Any tutorial links?

12:06 am on Mar 25, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


HTML alone won't do it, but a combination of css and javascript will. Essentially you set a block-level element such as <div> to render initially with a css rule of display:none - give it a unique ID to identify it. Then use a javascript link to switch that rule to display:block when the link is clicked.

You can find many examples of this on the web by searching for "accordion menu". Just view the code and you'll see that it's not all that much to adapt it to a non-menu situation.

I'm not sure whether MS is currently using this approach on Live,
because they love to go for IE-only approaches and I can't get that
page to load right now, anyway. But the approach I described will
be good cross-browser,

12:26 am on Mar 25, 2006 (gmt 0)

New User

10+ Year Member

joined:Mar 23, 2006
posts:22
votes: 0


cool. thanks.