Edit in JSFiddle

$("#button").click(function() {
    $("#button, #content").toggleClass('open');
});
<div class="container">
		<div id="SlidingDown">
			<div id="buttonWrap">
				<h3>Click Me &rarr;</h3>
				<div id="button"><span class="animate">&#43;</span></div>
			</div>
			<div id="content" class="animate">
				<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
			</div>
		</div>
	</div>
body {
			text-align:center;
			font-family:'Helvetica Neue';
			font-weight: lighter;
			font-size: 16px;
			background: #e7e7e7;
			padding-top: 50px;
		}
			a {
				color: #f0f0f0;
				text-decoration: none;
			}
		.container {
			clear: both;
			display: block;
			margin: 0 auto;
			width: 100%;
			height: 9000px;
			position: relative;
		}
		/* ANIMATIONS */
		.animate {
			-webkit-transition: all 0.35s ease-out;
			-moz-transition: all 0.35s ease-out;
			-ms-transition: all 0.35s ease-out;
			-o-transition: all 0.35s ease-out;
			transition: all 0.35s ease-out;
		}
		#SlidingDown {
			width: 400px;
			min-height: 60px;
			display: block;
			margin: 0 auto;
			overflow: hidden;
			border: 1px solid rgba(255, 255, 255,1);
		}
			#content {
				display: block;
				overflow: hidden;
				height: 0;
			}
				#content.open {
					min-height: 120px;
				}
			#content p {
				width: 95%;
				margin:0 auto;
				text-align: left;
				margin: 10px 5px;
				display: inline-block;
			} 
		#buttonWrap {
			margin: 0 auto;
			width: 100%;
			height: 60px;
		}
		#buttonWrap h3 {
			margin: 15px 10px 0;
			text-align: left;
			width: 320px;
			float: left;
			font-weight: 100;
			font-size: 25px;
			text-align: right;
		}
			#buttonWrap #button {
				width: 50px;
				height: 50px;
				float: right;
				display: block;
				background: #4789e1;
				border-radius: 50%;
				position: relative;
				line-height: 36px;
				cursor: pointer;
				margin: 5px 5px 0 0;
				display: inline-block;
			}
				#buttonWrap #button.open {
					-webkiot-box-shadow:0px 0px 5px rgba(0,0,0,0.2);
					-moz-box-shadow:0px 0px 5px rgba(0,0,0,0.2);
					-ms-box-shadow:0px 0px 5px rgba(0,0,0,0.2);
					-o-box-shadow:0px 0px 5px rgba(0,0,0,0.2);
					box-shadow:0px 0px 5px rgba(0,0,0,0.2);
				}
				#buttonWrap span {
					position: relative;
					color: rgba(255, 255, 255, 1);
					font-size: 4em;
					text-align: center;
					font-weight: 100;
					display: block;
					margin: 0;
					padding: 0;
					width: 100%;
					height: 100%;
				}
					#buttonWrap .open span {
						-webkit-transform: rotate(135deg);
						-moz-transform: rotate(135deg);
						-o-transform: rotate(135deg);
						-ms-transform: rotate(135deg);
							transform: rotate(135deg);
					}
			.spiner-holder-one {
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
				box-sizing: border-box;
			}