Q:

Помогите с условием

Раньше был toggle и проблем не было, сейчас toggle убрали и я в тупике. С обычными условиями проблем нет, если элемент скрыт, то показываем, если показан, то скрыть, но здесь нечто иное ... Не могу понять.
Посмотрите, пожалуйста.
HTML
<div class="padding-box show-card">
    <a class="turn-card" href="#">Повернуть</a>
    <div class="click panel">
        <div class="front">
            <img src="http://megalife.com.ua/uploads/posts/2011-01/thumbs/1296512775_airena-wallapack-188-47.jpg" alt="#" />
        </div>
        <div class="back">
            <img src="http://www.moe-online.ru/image/news/226042_s1.jpg" alt="#" />
        </div>
    </div>
</div>

CSS
.turn-card {
    width: 100%;
    display: block;
    padding: 20px;
    background: #222;
    color: silver;
    text-align: center;
    text-decoration: none;
}

/*Перевертыш*/
    .panel {
            width: 100%;
            position: relative;

            -webkit-perspective: 600px;
            -moz-perspective: 600px;
        }

        .front img, .back img { display: block; width: 100%; height: auto; }
        /* -- make sure to declare a default for every property that you want animated -- */
        /* -- general styles, including Y axis rotation -- */
        .panel .front {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 900;
            width: 100%;
            background: #6b7077;
            text-align: center;

            -webkit-transform: rotateX(0deg) rotateY(0deg);
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;

            -moz-transform: rotateX(0deg) rotateY(0deg);
            -moz-transform-style: preserve-3d;
            -moz-backface-visibility: hidden;

            /* -- transition is the magic sauce for animation -- */
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
        }
        .panel.flip .front {
            z-index: 900;
        }

        .panel .back {
            float: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 800;
            width: 100%;
            height: auto;
            background: #333;

            -webkit-transform: rotateY(-180deg);
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;

            -moz-transform: rotateY(-180deg);
            -moz-transform-style: preserve-3d;
            -moz-backface-visibility: hidden;

            /* -- transition is the magic sauce for animation -- */
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
        }

        .panel.flip .back {
            z-index: 1000;
            background: #80868d;

            -webkit-transform: rotateX(0deg) rotateY(0deg);
            -moz-transform: rotateX(0deg) rotateY(0deg);
        }

        /* -- X axis rotation for click panel -- */
        .click .front {
            cursor: pointer;
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
        }
        .click.flip .front {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
        }
        .click .back {
            cursor: pointer;
            -webkit-transform: rotateX(-180deg);
            -moz-transform: rotateX(-180deg);
        }
        .click.flip .back {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
        }

JS
$('.turn-card').click(function(){

        $('.click').addClass('flip');

        // $('.click).removeClass('flip');
    return false;
    });

    function getHeightForTurnBox() {
        var el = $('.panel');
        var height = $(window).width();

        el.css('height', height * 0.56);
    } 
    getHeightForTurnBox()
    window.addEventListener("orientationchange", getHeightForTurnBox, false);
    $(window).resize(getHeightForTurnBox);

A:

Не понял, кто toggle убрал? Вот так -- $('.click')[0].classList.toggle('flip') -- все работает. JSFiddle

