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.
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;}
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"
The height and width are set to match the
title images. Also a little bit of padding and a
huge left margin. I don't know the reason for the
margin -- but this is what Matt did so I'm just
repeating. Maybe can someone can fill me in.
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!
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.
Nothing to see here, move along. Not one
setting turned on. He's going for straight
functional text.
I hope you have a wide theme because this
accordion is wide wide wide! I didn't so I've had
to go to a different theme to display this
accordion in all its glory. I think this
accordion would still look great even on some
narrower content, but I wanted to be faithful to
Matt's design -- so I sacrificed my theme to it!
No content images. Not exactly a surprise.
We're just keeping it clean.