Edit in JSFiddle

$ ->
  $('.collapsible .content').each ->
    $(this).css {height: $(this).height() + 'px'}
    
  $('.collapsible h3').click ->
    $(this).parent().toggleClass('collapsed')

<div class='collapsible'>
  <h3>Click Me to Toggle</h3>
  <div class='content'>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque risus sit amet massa aliquet suscipit vitae eget orci. Aenean sit amet urna eu ipsum convallis ornare.</p> <p>Etiam congue aliquet velit non pulvinar. Donec dui odio, tristique id volutpat eget, fermentum eget turpis. Quisque eros tortor, pulvinar id scelerisque ut, egestas bibendum libero. Proin porttitor nisi ante. Duis consequat massa sit amet tortor tincidunt et tempor mauris molestie. Vivamus consequat augue posuere libero commodo mollis.</p> <p>Donec lacus urna, consequat nec rutrum in, eleifend ac ligula. Suspendisse venenatis purus at lorem dignissim tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
  </div>
</div>

.collapsible {
  margin: 20px;
  font-family: "Lucida Grande", "Lucida Sans", sans-serif;
  width: 300px;   
  -webkit-box-shadow: 1px 1px 15px #aaa;
  -moz-box-shadow: 1px 1px 15px #aaa;    
  box-shadow: 1px 1px 15px #aaa;    
  
  h3 {
    background: #333;
    color: white;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
    
    &:after {
      content: "-";
      float: right;
      font-weight: bold;    
    }
  }

  &.collapsed h3:after { content: "+" }

  .content {
    background: #eee;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 0.2s;
    -moz-transition: height 0.2s;
    transition: height 0.2s;
  }

  &.collapsed .content {
    height: 0px !important;
  }

  p {
    margin: 10px 10px 0;    
  }

  p:last-child {
    margin-bottom: 10px;  
  }
}