Slide tahr under

HTML

<div id="whatever">
     <div id="c1">content
        <button type="button">Click Me!</button>
     </div> +
     <div id="c2">content
        <button type="button">Click Me!</button>
     </div>
     <div id="c3">content
        <button type="button">Click Me!</button>
     </div>
    
    
</div>

<div id="c4">content
        <button type="button">Click Me!</button>
     </div>
    <div id="c5">content
        <button type="button">Click Me!</button>
     </div>

CSS

#whatever div {
    position: relative;
    display: inline;
    margin: 0 1em 0 1em;
    width: 30%;
    border: 1px solid red;
    height: 400%;
    transition: all .75s;
}

#c1{
    background-color: red;
    height: 100px;
    width: 200px;
    padding: 40px;
    z-index: 10;
    cursor: pointer;
}
#c2{
    background-color: green;
    padding: 40px;
}
#c3{
    background-color: yellow;
    padding: 40px;

}

#c4{
    background-color: #00FFFF;
    padding: 40px;
    display: none;
}

#c5{
    background-color: ##FF00FF;
    padding: 40px;
    display: none;
}

.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');
    // Click event
    this.ch[0].onclick = this.click.bind(this);
    /* Or use something like:
    that = this,
    this.ch[0].onclick = (function(e) {
        that.click(e);
    });
    */
    // 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() {
    this.pos = [];
    for (var i = 0; i < this.ch.length; ++i)
        this.pos.push(this.left(this.ch[i]));
};
// Show
Slider.prototype.show = function() {
    for (var 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() {
    for (var 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");