JavaScript sliding functionality for two divs

Issue

I am writing a simple JS functionality.
When I click the red color div, I want yellow and green color div to go under it with a simple sliding and both yellow and green should not be visible since they will be hiding behind red.
Similarly when I click back the red div, the green and yellow div should open up with same sliding functionality.

I am trying to achieve similar kind of slide movement as in the following URL.

animated-playing-cards

jsFiddle

var whatever = document.getElementById("whatever");

Array.prototype.push.apply((whateversChildren = []), whatever.children);
whateversChildren.splice(0,1);

whatever.children[0].onclick = (function() {

    if (whatever.children.length > 1) {
        for (var i = 0; i < whateversChildren.length; i++) {
            whatever.removeChild(whateversChildren[i]);
            whatever.firstElementChild.appendChild(whateversChildren[i]);
        }
    } else {
        for (var i = 0; i < whateversChildren.length; i++) {
            whatever.firstElementChild.removeChild(whateversChildren[i]);
            whatever.appendChild(whateversChildren[i]);
        }
    }
});

Solution

As you have tagged this JavaScript I’m following the tags description and:

Unless a tag for a framework/library is also included, a pure JavaScript answer is expected.

This could be a start. Relies upon transition in CSS and JavaScript to calculate some left positions.

Transition is set on “all” which mean any style property changed will change by the time given. In code sample it is set to 0.75 seconds.

Fiddle demo

CSS:

#whatever div {
    position   : relative; /* Added. For movement and z-index */
    transition : all .75s; /* Added. For animation/slide */
}

#c1 {
    z-index : 10;         /* Added. To keep it atop. */
    cursor  : pointer;    /* Added. For nicety. */
}

.show {
    opacity : 1;
}
.hide {
    opacity : 0.3;
    z-index : 1;
}

JavaScript:

function Slider(id) {
    var box = document.getElementById(id);
    // CSS class names
    this.css = {
        show : 'show',
        hide : 'hide'
    };
    // Array holding left position for each element.
    this.pos = [];
    // Get all the children
    this.ch  = box.getElementsByTagName('DIV');
    this.ch[0].onclick = this.click.bind(this);
    // Get initial positions.
    this.fillPos();
    // Make sure to add class show.
    this.show();
}
// Find left position of an element.
Slider.prototype.left = function(e) {
    var x = e.offsetLeft;
    while (e = e.offsetParent) {
        x += e.offsetLeft;
    }
    return x;
};
// Get left position for all elements.
Slider.prototype.fillPos = function() {
    var i;
    this.pos = [];
    for (i = 0; i < this.ch.length; ++i) {
        this.pos.push(
            this.left(this.ch[i])
        );
    }    
};
// Show
Slider.prototype.show = function() {
    var i;
    for (i = 1; i < this.ch.length; ++i) {
        this.ch[i].className = this.css.show;
        this.ch[i].style.left = '0';
    }
};
// Hide
Slider.prototype.hide = function() {
    var i;
    for (i = 1; i < this.ch.length; ++i) {
        this.ch[i].className = this.css.hide;
        // Set left equal to left minus left position of first (red) element.
        this.ch[i].style.left = -(this.pos[i] - this.pos[0]) + 'px';
    }
};
// Event handler.
Slider.prototype.click = function(e) {
    if (this.ch[1].className === 'hide')
        this.show();
    else
        this.hide();
};

// Create new slider
var sly = new Slider("whatever");

Answered By – user13500

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published