Using jQuery hide with a toggle...basically I am trying to do an accordion but client wants the ability to have multiple content areas open at same time.

All is going ok but I can't figure out how to control the look of how the text animates. Ideally, I just want it to slide down from below the header. Bit it seems to appear from the right bottom corner.

here's my html:

```
<div id="accordion">

  <h3 class="dropdown dropdown-default-on">About Me</h3>
  <div id='about-div'>
    <p>Some info about Me. Lorem ipsum dolor sit amet.</p>
  </div>

  <h3 class="dropdown">My Skills</h3>
  <div id='about-div'>
    <p>Some info about my Skills. Lorem ipsum dolor sit amet.</p>
  </div>

</div>

```

[Here's my jsfiddle](http://jsfiddle.net/9hmhU/)