I'm trying to create a simple linear transition effect, but for some reason it's not working. Any suggestions on what might be causing the issue?
HTML
<div class="button-modern" style="background-color:#e73032">
<span style="color:#fff; font-size:1rem">MORE</span>
<br><span style="color:#fff; font-size:2rem">INFORMATION</span>
<div class="button-modern--info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div class="button-modern--click js-button-modern--click">
<span></span>
</div>
</div>
CSS
.button-modern {
padding: 18px 22px;
position: relative;
}
.button-modern--opened .button-modern--info {
text-transform: none;
height: 100%;
}
.button-modern--click {
width: 56px;
height: 56px;
position: absolute;
bottom: 0;
right: 0;
overflow: hidden;
}
.button-modern--click > span:before {
font-family:'FontAwesome';
font-weight: normal;
font-style: normal;
speak: none;
vertical-align: middle;
font-size: 26px;
content:" \F107";
padding: 0 10px 0 0;
color: #fff;
position: absolute;
right: 0;
bottom: 0;
}
.button-modern--opened .button-modern--click > span:before {
font-family:'FontAwesome';
font-weight: normal;
font-style: normal;
speak: none;
vertical-align: middle;
font-size: 26px;
content:" \F106";
padding: 0 10px 0 0;
color: #fff;
position: absolute;
right: 0;
bottom: 0;
}
.button-modern--click > span {
cursor: pointer;
}
.button-modern--info {
height: 0;
overflow: hidden;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
}
JS
$('.button-modern').find('.js-button-modern--click').click(function (e) {
$(this).parent().toggleClass('button-modern--opened');
});
JSFiddle http://jsfiddle.net/zilli/7rpEW/