Hide Object and show it by click

Question

i have here three div boxes which i included into a rotator script .

So if some one clicks on the right button it will shows the next div box. The problem that i have is that it shows me all 3 boxes. as u can see here. So they laying over each other.

How do i make it that it just shows me one and the other one by click on the button ?

    $(document).ready(function(){

//===== Apps slider script =====

    var angle = 0;

$('.slider .slide:odd').css({
    "-webkit-transform": "rotateY(180deg)",
    "-moz-transform": "rotateY(180deg)",
    "-o-transform": "rotateY(180deg)",
    "-ms-transform": "rotateY(180deg)",
    "transform": "rotateY(180deg)"

   /* "-moz-transform": "scaleX(-1)",
    "-o-transform": "scaleX(-1)",
    "-webkit-transform": "scaleX(-1)",
    "-ms-transform": "scaleX(-1)",
    "transform": "scaleX(-1)"*/

});

function sliderResize(){
    if ($(window).width() <= 550) {
        $('.appsblock .apps .slider').css("min-height", $(window).width() + 100);
    }
}

$('.slider .navigation-right').click(function(){
    if ($(this).parent().find('.active').is(':last-child') == false) {
        angle = angle - 180;
        var angledeg = 'rotateY(' + angle + 'deg)';

        $(this).parent().find('.rotator').css({
            "-webkit-transform": angledeg,
            "-moz-transform": angledeg,
            "-o-transform": angledeg,
            "-ms-transform": angledeg,
            "transform": angledeg
        });
        $(this).parent().find('.active').next().toggleClass('active');
        $(this).parent().find('.active:first').toggleClass('active');

    }
});

$('.slider .navigation-left').click(function(){

    if ($(this).parent().find('.active').is(':first-child') == false) {
        angle = angle + 180;
        var angledeg = 'rotateY(' + angle + 'deg)';

        $(this).parent().find('.rotator').css({
            "-webkit-transform": angledeg,
            "-moz-transform": angledeg,
            "-o-transform": angledeg,
            "-ms-transform": angledeg,
            "transform": angledeg
        });
        $(this).parent().find('.active').prev().toggleClass('active');
        $(this).parent().find('.active:last').toggleClass('active');
    }

});

http://jsfiddle.net/mK8LL/5/

I put in line 540 a opacity:0, that was on my old side to and there it works perfactly. if you take the opacity on line 540 in the css part put you will see what I mean.

Answer 1

You just have to inverse your classes. Set .appsblock .apps .slider .rotator .active under .appsblock .apps .slider .rotator .slide.

It should look like this :

.appsblock .apps .slider .rotator .slide {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-backface-visibility: visible;
    left: 0;
    width: 100%;
    position: absolute;
    opacity: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.appsblock .apps .slider .rotator .active {
    opacity: 1;
}

Your opacity:0 erase your opacity:1 found in .active because css classes are red from top to bottom. With this new code, the first slide (.active) is now at 100% opacity.

Fiddle