click show hide

with animation

by shengoo

HTML

<div style="overflow:hidden;">
            <div class="share">
                <a class="share_btn" onclick="$('.share').toggleClass('show');">click</a>
                <div style="width:112px;display: inline-block;">
                    hidden things
                </div>
            </div>
        </div>

CSS

.share{
    float: right;
    overflow: hidden;
    padding: 5px;
    -webkit-transition: all .2s linear 0s ;
    -moz-transition: all .2s linear 0s ;
    -ms-transition: all .2s linear 0s ;
    -o-transition: all .2s linear 0s ;
    transition: all .2s linear 0s ;
    -webkit-transform: translateX(118px);
    -moz-transform: translateX(118px);
    -ms-transform: translateX(118px);
    -o-transform: translateX(118px);
    transform: translateX(118px);
}
.share.show{
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.share .share_btn{
    background-color: #FF8800;
    color: white;
    width: 60px;
    height: 60px;
    display: inline-block;
    /*position: absolute;*/
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    font-size: large;
    cursor: pointer;
    box-shadow: 0 0 5px 2px #cccccc;
}
.share .btns{
    display: inline-block;
}