button collapse text CSS3

button collapse text CSS3.markdown

button collapse text CSS3

A Pen by Ry Arush on CodePen.

License.

index.html

<div class="row" style="background-color:#036;">
  <button style="float:right; color:#f7f7f7;" type="submit" onclick="growDiv()" id="more-button" class="btn btn-info biru"><i class="fa fa-bars"></i></button>
</div>

<div id='menuToggl'>
  <div class='bar-menu'>
    <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit
      amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
  </div>
</div>

script.js

function growDiv() {
  var growDiv = document.getElementById('menuToggl');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.bar-menu');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}

style.css

.btn-info.biru {
  background:#0a2048;
  border:1px solid #0a2048;
  border-radius: 0px;
  
}

.btn-info.biru:hover, .btn-info.biru:focus, .btn-info.biru:active, .btn-info.biru.active, .open > .dropdown-toggle.btn-info {
  background:#036;
  border:1px solid #036;
}

.btn-info.biru:active, .btn-info.biru.active{
  background:#036;
  border:1px solid #036;
  box-shadow: none;
  border-color: #036;
}




#menuToggl input:checked {
  color: red;
}

#more-button:hover {
  color: black;
}

#menuToggl {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />