Fact Animation Example

Fact-Animation-Example.markdown

Fact Animation Example

Expanding a Fact or a box such as an according.

A Pen by ezos86 on CodePen.

License.

index.html

<div class="fact">
  Fact 1
</div>
  <div class="fact-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dignissimos cupiditate culpa assumenda commodi doloribus ullam accusamus, consectetur! Nulla repellendus nam veritatis dolorem provident ullam consequuntur quibusdam cupiditate repudiandae molestias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta praesentium quisquam molestiae repudiandae. Fugit dolor quia impedit aspernatur ipsam? Accusantium impedit rem est odio voluptate? Rem recusandae porro, quia exercitationem.
</div>

script.js

$('.fact').click(function(){
  $('.fact-content').toggleClass("fact-open");
});

style.scss

@import "compass/css3";
*{
  box-sizing: border-box;
}
.fact{
  font-size:18px;
}
.fact-content{
  max-height:0px;
  @include transition();
  overflow:hidden;
  background-color:#f1f1f1;
}
.fact:hover{
  cursor: pointer;
}
.fact-open{
  max-height:100px;
  display:block;
  position:relative;
}