Eco Matt

Matthew Graves has kindly shared one really fine example of an accordion. Matt is known on the RapidWeaver forums as the guy who found a way to put accordions inside accordions. This example won't show you how to set up something as wild as that, but it will show you how to replicate is simple, classic, contemporary design. It's beautifully understated and highly useful. Enjoy.

Custom CSS

Pasted Graphic
To make your Accordion look like Matt's you'll need to start by adding a little bit of custom CSS. Don't be afraid, it's really not that bad. Just type this stuff into the Custom CSS area of the page inspector:
.acToggle {text-align:center;}

Title Style

page50_3
Matt is really going for a minimalist's style here. The only property he's going to override is the CSS Tag. This allows the Custom CSS that we set up earlier to have a clean place to connect to. The only changed setting to change the tag to "DIV"

Title Structure

page50_4
The height and width are set to match the title images. Also a little bit of padding and a huge left margin. The large margin visually centers the title images -- nice trick.

Title Image

page50_5
Matt uses a couple very nice images here. I think you should probably go find your own images -- but there are some good lessons to be learned. Notice how he uses the same images here turned over -- with some extra padding to make them look like they've flipped. Repetition is one of the tenets of aesthetic. Matt is clearly a master. Soak in his creativity. Digg it!

Title Effect

page50_6
Just as you'd expect. It's a standard accordion, centered on the page. The only really unique parts here are that everything starts closed. This works well with the Content settings. The Content is very wide, which is quite functional, but would corrupt the clean style of the page if it was always visible.

Content Style

page50_7
Nothing to see here, move along. Not one setting turned on. He's going for straight functional text.

Content Structure

page50_8
I hope you have a wide theme because this accordion is wide wide wide! My theme isn't quite this wide, so I've scaled it down to 600px for the page that you're viewing, but Matt's original design had it set to 711px. Wow.

Content Image

page50_9
No content images. Not exactly a surprise. We're just keeping it clean.