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.

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

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.

Advertisements
Leave a comment

1 Comment

  1. ahrcanum

     /  December 3, 2008

    Noticed you lost 20 pounds. Good Health to you!

    Reply

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: