CodePen

HTML

            
              <div class="showmore-top showmore"></div>
<div id="people" class="closed">
  <div id="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;
  transition: height ease-in 1s;
}
#content {
  height: 500px;
  width: 500px;
  margin: 0 auto;
}

#people.closed { height: 0; }
#people.open { height: 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

            
              jQuery("div.showmore").on('click', function(){
  var closed = jQuery('#people').hasClass('closed');
  var open = jQuery('#people').hasClass('open');
  if ( closed = true ) {
    jQuery('#people').removeClass('closed').addClass('open');
  } else if ( open = true ) {
    jQuery('#people').removeClass('open').addClass('closed');
  }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................