$("#button").click(function() { $("#button, #content").toggleClass('open'); });
<div class="container"> <div id="SlidingDown"> <div id="buttonWrap"> <h3>Click Me →</h3> <div id="button"><span class="animate">+</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; }