Creating an accordion effect only using CSS

So I was toying around with the spry widget on Dreamweaver and I struggle to accomplish the desired effect. Hearing the tales of mystery and great power that CSS holds I thought, surely this magnificent tool can give me what I need! So as a result I stumbled upon which gave me an accordion effect using only CSS. Sweet! Now I am here to tell you how to do this!





Okay so wam bam thank you ma’am we start with some HTML as usual…

<div id=”accordion”>
<div id=”part1″>
<p>This text is in part 1.</p>
<div id=”part2″>
<p>This text is in part 2.</p>
<div id=”part3″>
<p>This text is in part 3.</p>

Basically what this did was create 3 panels for your accordion. The text is where you add all your little bits of information. Next we get to work on styling this baby. CSS layout is courtesy of CSS Newbie…thanks guy.

#accordion {
width: 500px;
margin: 100px auto; }

Now that accounted for how much space by accordion will take.

#accordion div {
float: left;
height: 300px;
overflow: hidden;}

Okay so the above information gave the accordion div a default setting so it sits centered and happy on your page – visually very good. We float the div to the left and define its width and height so its positioned. Quote from CSS Newbie who explains the overflow better than I ever could:

“The overflow: hidden part here is also crucially important. This is what prevents my divs from either resizing to fit their content or spilling their content out of the containing div and onto our page. It also creates a nice visual effect… people will wonder what content they’re missing, and will mouse over the area to investigate.”

Next step is creating the hover effects which allow our bars to slip in and out and create the accordion effect. There are 2 steps you need to folllow.

step 1

#accordion:hover div { width: 20px; }

step 2

#accordion {
width: 500px;
height: 400px;
margin: 20% auto; }
#accordion div {
overflow: hidden;}
#accordion:hover div {
height: 20px; }
#accordion:hover div:hover {
height: 340px;
overflow: auto; }

Those are big steps…

Once you have slapped that code in you can tweak it to fit your page. You can customize it too by adding color and font types to give it a personalized feel. Go CRAZY! Enjoy.

You have learnt well from your master!


About nicobaleng

My paradoxical love for the web is feeling immense freedom while confined to a seated position behind a desk. This is what the world wide web has to offer. Learning about the latest technological toys or playing around with programs sounds like nerds-play, but once you start exploring, the pc monitor in front of you becomes less and less intimidating. Tracked and documented I will share the journey of an average Joe like me, moving up toward achieving a black belt in web design! KAPOW!

Posted on September 21, 2011, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

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

You are commenting using your 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: