CodePen

HTML

            
              <article class='item'>
  <header><h3>My Title</h3></header>
  <section class='content'>
    <p>My content.</p>
    <p>More content, maybe a list:</p>
    <ul>
      <li>Huskies</li>
      <li>German Shepherds</li>
    </ul>
  </section>
  <footer></footer>
</article>
<article class='item'>
  <header><h3>My Title</h3></header>
  <section class='content'>
    <p>My content.</p>
    <p>More content, maybe a list:</p>
    <ul>
      <li>Huskies</li>
      <li>German Shepherds</li>
    </ul>
  </section>
  <footer></footer>
</article>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * { margin: 0; }
html { background: dimgrey; font: 100% 'Century Gothic', Helvetica, sans-serif; }
.item {
  border-radius: .5em;
  width: 20em;
  margin: .8em auto;
}
.item header {
  position: relative;
  z-index: 3;
  padding: .35em .8em;
  border-radius: .5em .5em 0 0;
  background: black;
  color: gainsboro;
  letter-spacing: 1px;
  cursor: pointer;
}
.item h3:after { float: right; content: '▼'; }
.item .content {
  overflow: hidden;
  position: relative;
  max-height: 0;
  padding: .7em .7em .5em;
  box-shadow: inset 0 3px 5px dimgrey, 
    inset 0 -3px 5px dimgrey;
  margin-top: -1.4em;
  background: whitesmoke;
}
.item footer {
  height: .65em;
  border-radius: 0 0 .5em .5em;
  background: black;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.item header').click(function(){
  var c = $(this).next();
  if($(this).hasClass('expanded')) {
    c.animate({
      'max-height': 0,
      'margin-top': '-1.4em'
    }, 1000);
  }
  else {
    c.animate({
      'max-height': '400px',
      'margin-top': 0
    }, 1000);
  }
  $(this).toggleClass('expanded');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................