Slider

Click box have content slide out

by akmiecik

HTML

<div id="clckSld"><p>Clicker 1</p></div>
<div class="lftRgt"></div>
<div id="clckSld2"><p>Clicker 2</p></div>
<div class="lftRgt2"></div>
<div id="clckSld3"><p>Clicker 3</p></div>
<div class="lftRgt3"></div>

CSS

#clckSld, #clckSld2, #clckSld3{
    background-color: gray;
    display: block;
    cursor: pointer;
    width: 20vw;
    height: 20vw;
    border-radius: 5px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
        }
#clckSld p, #clckSld2 p, #clckSld3 p {
    color: #fff;
    text-align: center;
}
#clckSld2 {
  top: 20vw;
  }
  #clckSld3 {
  top: 40vw;
  }
.lftRgt, .lftRgt2, .lftRgt3 {
    background-color: #ff0000;
    width: 80vw;
    height: 20vw;
    border-radius: 5px;
    position: relative;
    bottom: 3vh;
    z-index: 0;
    margin-left: -100%;

}

JavaScript

pos = 'left';

$('#clckSld').click(function() {
    if (pos == 'left'){
        $('.lftRgt').animate({
            marginLeft: "19vw" }, 1000 );
        pos = 'right';
    }
    else {
        $('.lftRgt').animate({
            marginLeft: "-100%"
        }, 1000 );
        pos = 'left';
    }
});
$('#clckSld2').click(function() {
    if (pos == 'left'){
        $('.lftRgt2').animate({
            marginLeft: "19vw" }, 1000 );
        pos = 'right';
    }
    else {
        $('.lftRgt2').animate({
            marginLeft: "-100%"
        }, 1000 );
        pos = 'left';
    }
});
$('#clckSld3').click(function() {
    if (pos == 'left'){
        $('.lftRgt3').animate({
            marginLeft: "19vw" }, 1000 );
        pos = 'right';
    }
    else {
        $('.lftRgt3').animate({
            marginLeft: "-100%"
        }, 1000 );
        pos = 'left';
    }
});