clima home

by cristianromagnoli

HTML

<div class="clima-wrp">
    <div class="clima-widget"></div>
    <div class="clima-slide"></div>
    <div class="clima-btn"></div>
</div>

<div class="another-element">llalalalalal</div>

CSS

.clima-wrp{
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.clima-widget{
    background-color:red;
    width:120px;
    height:100px;
    float:left;
}
.clima-slide{
    background-color:yellow;
    width:300px;
    height:100px;
    display: none;
    float:left;
    position: absolute;
}
.clima-btn{
    background-color:blue;
    width:20px;
    height:60px;
    margin:20px 0;
    float:left;
}

.another-element{
    float: left;
}

JavaScript

$('.clima-btn').on('click', function(){
    $('.clima-slide').animate({
        width: 'toggle',
        opacity: 'toggle'
    }, 300, 'swing');
});