{k} -Display content with slideUp effect in jquery

On click content slide down with css and jquery effects. Slow and pure effect to set visible a hiden element.

by John Doe

HTML

<a href="javascript:void(0)" class="gomb">
    <span class="tartalom">tartalom</span>
    <img src="http://itprof.kz/images/eye_open_40.png">
</a>
<a href="javascript:void(0)" class="gomb">
    <span class="tartalom">tartalom</span>
    <img src="http://itprof.kz/images/eye_open_40.png">
</a>
<a href="javascript:void(0)" class="gomb">
    <span class="tartalom">tartalom</span>
    <img src="http://itprof.kz/images/eye_open_40.png">
</a>
<a href="javascript:void(0)" class="gomb">
    <span class="tartalom">tartalom</span>
    <img src="http://itprof.kz/images/eye_open_40.png">
</a>

CSS

.gomb{
    display:block;
    background-color:#4679BD;
    width:100px;
    height: 100px;
    margin: 0 10px 10px 0;
    float: left;
    position: relative;
    border-radius: 5px;
    overflow:hidden;
}
.tartalom{
    display:none;
    height:38px;
    width: 100px;
    color: #F6F6F6;
    background-color:#4072B4;
    text-align: center;
    font-family:arial;
    line-height: 38px;
    position: absolute;
    bottom: 0;
    border-radius: 5px;
}
.tartalom.click{
    display:block;
}
.gomb img{
    margin: 30px 0 0 25px;
    opacity: 0;
    transition: all ease-in-out 300ms;
}
.gomb:hover img{
    opacity: 0.3;
}
.gomb.click:hover img{
    opacity: 0.1;
}
.gomb.click img{
   opacity: 0.1; 
    margin: 20px 0 0 25px
}

JavaScript 1.7

$(".gomb").click(function(){
	var card = $(this).children(".tartalom");
    var elem =$(this);
        if (elem .hasClass("click")) {	
            elem .removeClass("click");
            card .slideUp( "slow", function() {
                // Animation complete.
            });
         }
         else{
            elem .addClass("click");
            card .slideDown( "slow", function() {
                // Animation complete.
            });
         }
});