Flipper

Reveal content on click.

Click Me!

Click Me!

Here is some content.

Click Me!

Here is some content.

HTML

<div class="flipper">
    <div class="flipper-container">
        <div class="flipper-front">
            <p>Click Me!</p>
        </div>
        <div class="flipper-back">
            <p>Here is some content.</p>
        </div>
    </div>
</div>

Sass

.flipper {
    @include elr-flipper;
    padding: 40px;
}

.flipper-container {
    @include elr-circle(200px);
}

.flipper-front,
.flipper-back {
    @include elr-circle(200px);

    p {
        @include elr-centerer(true, false);
        @include elr-em-font(18px);
        width: 100%;
        color: $white;
        text-align: center;
    }
}

.flipper-container {
    @include elr-square(200px);
}

.flipper-front,
.flipper-back {
    @include elr-square(200px);

    p {
        @include elr-centerer(true, false);
        @include elr-em-font(18px);
        width: 100%;
        color: $white;
        text-align: center;
    }
}

.flipper-front,
.flipper-square-front { background-color: $elr-blue; }
.flipper-back,
.flipper-square-back { background-color: $dark-pink; }

JavaScript

$('.flipper-container').on('click', function() {
    $(this).toggleClass('active');
});