Alternative to css $.hover() using toggle does not work

Question

Hi i have the following js code:

$(function () {
    if ($('html').hasClass('csstransforms3d')) {    

        $('.thumb').removeClass('scroll').addClass('flip');     

        $('.thumb.flip').hover(
            function () {

                $(this).find('.thumb-wrapper').addClass('flipIt');
            },
            function () {
                $(this).find('.thumb-wrapper').removeClass('flipIt');           
            }
        );

    } else {

        $('.thumb').hover(
            function () {
                $(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
            },
            function () {
                $(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');          
            }
        );

    }
});

What the code does is basically flipping a div area whenever a cursor is hovering on it.

I would like to change this part

$('.thumb.flip').hover( ... rest of code goes here ...

to a clicked behaviour. I have tried using both click and toggle but it does not work.

i have tried using this solution with no luck:

$('.thumb.flip').click(
    function () {

        $(this).find('.thumb-wrapper').toggleClass('flipIt');
    },

$('.thumb.flip').on('click',
    function () {

        $(this).find('.thumb-wrapper').toggleClass('flipIt');
    },

$('.thumb.flip').toggle(
function () {

    $(this).find('.thumb-wrapper').addClass('flipIt');
}

Does anyone know why is this?

editted:

just to be clear, what i want is to make the div flip when ever a user click on the div instead of hover.

here is my CSS

.thumb {
    display:block;
    width:200px;
    height:140px;
    position:relative;
    margin-bottom:20px;
    margin-right:20px;
    float:left;
}

    .thumb-wrapper {
        display:block;
        width:100%;
        height:100%;
    }

    .thumb img {
        width:100%;
        height:100%;
        position:absolute;
        display:block;          

    }

    .thumb .thumb-detail {
        display:block;
        width:100%;
        height:100%;
        position:absolute;          
        background:#fff;        
    }


/*
* Without CSS3 Scroll Up Effect
*/
.thumb.scroll {
    overflow: hidden;
}   

.thumb.scroll .thumb-detail {
    bottom:-280px;
}

/*
* CSS 3D Card Flip Effect
*/  
.thumb.flip {
    perspective:800px;
}

.thumb.flip .thumb-wrapper {
    transition: transform 1s;
    transform-style: preserve-3d;           
}

.thumb.flip .thumb-detail {
    transform: rotateY(-180deg);                        
}

.thumb.flip img,
.thumb.flip .thumb-detail {
    backface-visibility: hidden;
}

.thumb.flip .flipIt {
    transform: rotateY(-180deg);            
}

Answer 1

To toggle a class on click, just use toggleClass :

$('.thumb.flip').on('click', function () {
    $(this).find('.thumb-wrapper').toggleClass('flipIt');
});

Answer 2

You can just toggle class like this:

$('.thumb.flip').click(function () {
    $(this).find('.thumb-wrapper').toggleClass('flipIt');
});

http://api.jquery.com/toggleClass/

Answer 3

You need to combine the click and the toggleClass functions:

$('.thumb.flip').click(function () {
    $(this).find('.thumb-wrapper').toggleClass('flipIt');
});

This should toggle the class flitIt on the .thumb-wrapper inside a .thumb.flip.

Answer 4

$('.thumb.flip').click(function(){
  $(this).find('.thumb-wrapper').toggleClass('flipIt');
});