CSS-Only Accordion

This was actually really easy to do, so much so that I felt kind of embarassed when I figured it out. Most of the credit should be given to cssnewbie; the modifications I made simply expanded on their article to only show the titles of the accordion sections.

The CSS:
#accordion {}
#accordion div {width:100%; height: 20px; padding: 3px; margin-bottom: 10px; color: #fff; overflow: hidden;}
#accordion div.content {display: block; border:1px solid #efefef; color: #363636;}
#accordion span.acc_head{display: block; font-weight: bold; background: #F1E3EB; padding: 3px;}
#accordion:hover div { height: 20px; }
#accordion:hover div:hover { height: auto; color: #363636;}
#accordion ul { list-style-type:none;display:inline table;margin:0;padding:0; width: 100%;  table-layout: fixed; }
#accordion li { display: table-cell; position: relative; min-width: 175px; max-width: 175px;}

The ul and li items are optional; I tend to use this with stuff I want to display in a table-type format.

<div id="accordion">
<div class="content">
<span class="acc_head">Title One</span>
Content and such
<div class="content">
<span class="acc_head">Title Two</span>
Content and such again

That’s it! The divs (should) only display the the titles of the content divs, the div being hovered on should expand to reveal all content, and the non-hovered divs should remain showing titles only.

Leave a comment

1 Comment

  1. ahrcanum

     /  December 3, 2008

    Noticed you lost 20 pounds. Good Health to you!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: