Hi!
Upon pressing the button i want it to split into two parts, one upper and one lower (vertically). Inbetween these parts i want another div to appear, which will be 100% wide.
Right now i have so that when the button is pressed, the div changes from a height of 0 to a full height and toggeling a border.
However, the script I have now doesnĘt work if two different parts of the div is pressed. Right now the script looks like this:

Code:
var divh = document.getElementById('people').offsetHeight;
  document.getElementById("people").style.height = "0px";
  jQuery("body.main #people").css('border', '0');
	jQuery("div.showmore").toggle(function(){
  		jQuery("div#people").animate({
    		height: divh
  		},500).css('border-bottom', '1px solid #111');
  	},function(){
    	jQuery('div#people').animate({
    		height: ['0px', 'swing']
    	},400).css('border', '0');
  		});
This code is both slow and it doesnt work
The html code looks like this:

Code:
<div class="showmore"></div>
<div id="people"></div>
<div class="showmore"></div>
How would I get this to work?
I'm thinking of something with variables or alike, but I might be doing this over complicated.
If the div wasn't wider than the button it would've been easier. This might be solved by some CSS hack.

Here's what it looks like.
http://codepen.io/anon/pen/Jcmkx

Thank you in advance.
//Will