<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" style="margin-top:25px;"> <div id="slide">click me</div> </div>

#slide { border: 1px solid black; height: 50px; transition: height 500ms ease; -moz-transition: height 500ms ease; -ms-transition: height 500ms ease; }

document.getElementById( 'slide' ).addEventListener( 'click', function() { ( this.style.height == '50px' || this.style.height == '' ) ? this.style.height = '150px' : this.style.height = '50px'; }, false );