Expanding box with transitions
by Susan Delgado
HTML
<div class="container">
<div class="row">
<section id="area" class="shrink">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="group1 hidden-xs">
<img src="http://lorempixel.com/400/200/" />
</div>
<div class="group1 visible-xs">
<div></div>
</div>
<div class="group2 "> <span>TITLE and Some text or whatever you want</span>
<svg id="arArrow" width="25" height="30">
<polygon points="0,0 24,0 12,18" style="fill:#eeeeee;" />
</svg>
<svg id="arArrow2" width="25" height="30">
<polygon points="0,18 12,0 24,18" style="fill:#eeeeee;" />
</svg>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
SCSS
section#area {
width:400px;
& > .container:first-child > .row:first-child {
padding-left:0px;
padding-right: 0px;
}
background-color: #333333;
overflow: hidden;
.container, .group1, .group2 {
transition: all .8s ease;
}
transition: all 1s ease;
.group1 {
position: absolute;
width:100%;
}
.group2 {
position: absolute;
width:100%;
color: #fff;
font-size: 14px;
padding-top: 18px;
padding-left: 18px;
span {
transition: all 1s ease;
}
strong {
color:#ffffff;
}
#arArrow, #arArrow2 {
cursor: pointer;
vertical-align: -9px;
width: 30px;
height:25px;
display: inline;
margin-left: 18px;
}
}
&.close {
height:0px;
float:none;
.group1 {
margin-left: -50px;
img {
display: block;
margin-left: 50px;
}
opacity: 1;
}
.group2 {
opacity: 0;
span {
opacity: 0;
}
#arArrow {
opacity: 0;
display:none;
}
#arArrow2 {
opacity: 1;
display:inline;
}
}
}
&.open {
height: 200px;
overflow: hidden;
.container {
height: 200px;
}
.group1 {
margin-left: 0px;
opacity: 1;
div {
background-image: url("http://lorempixel.com/400/200/");
...
JavaScript
/*Animation*/
$('#arArrow,#arArrow2').click(function () {
var classes = ['open', 'shrink'];
$('#area').each(function () {
this.className = classes[($.inArray(this.className, classes) + 1) % classes.length];
});
});
/* autoplay animation */
setTimeout(function () {
$('#area').removeClass('shrink').addClass('open')
}, 2000);