CodePen

HTML

            
              <div class="showmore-top showmore"></div>
<div id="people">
	<div class="content"></div>
</div>
<div class="showmore-bottom showmore"></div>

<!-- The problem is that if you press the upper one first, so that the #people is visible, and then press the bottom one, it wont't reset, so you have to press it again. 
Have a go yourself! :)
-->
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #people {
	min-width: 960px;
	width: 100%;
	overflow: hidden;
  background: #222;
}
div.content {
  height: 500px;
  width: 500px;
  margin: 0 auto;
}

div.showmore-top, div.showmore-bottom {
	height: 50px;
	width: 350px;
	cursor: pointer;
	text-align: center;
	margin: 0 auto;
	background-color: #a1432a;
	box-shadow: inset 0 -3px 10px #6f2815;

	color: #d0c5a5;
	font-family: 'QuadraatWeb-Bold';
	text-transform: uppercase;
	text-shadow: 0 1px 1px #111;
	font-size: 20px;
}

div.showmore-top {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

div.showmore-bottom {
	margin: 0px auto 30px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              	var divh = document.getElementById('people').offsetHeight;
document.getElementById("people").style.height = "0px";
jQuery("div.showmore").toggle(function(){
	jQuery("div#people").animate({
    height: divh
  },500);
},function(){
  jQuery('div#people').animate({
    height: ['0px', 'swing']
  },400);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................