JavaScript, Divs not moving back to initial position

I have 3 links on the center of the page that when you click on them it makes a div appear on the right and the links move to the left of the page. I want the links to move back to the center of the page once all of the divs display is equal hidden. Also, is there any way that I can make the divs appear on the 1st click instead of the second click.

Here is the fiddle: https://jsfiddle.net/tk8gkrho/1/

This is my HTML:

<div class="link">
        <ul>
            <li><a id="box1"> box1 </a></li>
            <li><a id="box2"> box2 </a></li>
        </ul>
</div>

<div id="display1">
    <img src="http://globalgamejam.org/sites/default/files/styles/game_sidebar__normal/public/game/featured_image/promo_5.png?itok=9dymM8JD">
</div>

<div id="display2">
        <img src="https://s-media-cache-ak0.pinimg.com/564x/a1/e3/6b/a1e36bcb8ce179bd8cc8db28ff4ef6fb.jpg">
</div>

This is my JavaScript:

var link = document.getElementsByClassName("link")
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");


var display1 = document.getElementById("display1");
var display2 = document.getElementById("display2");

function movingLeft(){
    for( var i = 0; i < link.length ; i++)
    {
        link[i].style.float = "left";
        link[i].style.paddingLeft = "20px";
        link[i].style.position = "fixed";
    }
};

function backToCenter(){
    if( (display1.style.display === "none") &&
        (display2.style.display === "none") )
        { 
            for( var i = 0; i < link.length; i++)
                link[i].style.float = "";
                link[i].style.position = "initial";
        }
}

box1.addEventListener("click", function(){
    if(display1.style.display === "none"){
        display1.style.display = "block";
        display1.style.float = "right";
        movingLeft();
    }
    else{
        display1.style.display = "none";
        backToCenter();
    }   
});

box2.addEventListener("click", function(){
    if(display2.style.display === "none"){
        display2.style.display = "block";
        display2.style.float = "right";
        movingLeft();
    }
    else{
        display2.style.display = "none";
        backToCenter();
    }   
});

This is my CSS:

.link{
    width: 30%;
    height: 100%;
    margin: 0 auto;
}

ul {
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

li{
    height: 13vh;
    padding-bottom: 5%;
}

li a {
    height: 75%;
    border: 1px solid white;
    border-radius: 5px 5px 5px 5px;
    background-color: rgba(79,87,89,0.9);
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    line-height: 10vh;
    transition: background-color 0.9s;
}

li a:hover{
    background-color: black;
    border: 2px solid white;
    font-weight: bold;
}

#display1{
    display: none;
    float:right;
    background-color: rgba( 0, 0, 0, 0.8); 
    color: white;
    width: 60%;
    margin-right: 30px;
}

#display1 img{
    width: 80%;
    height: 30%;
}

#display2{
    display: none;
    float:right;
    background-color: rgba( 0, 0, 0, 0.8); 
    color: white;
    width: 60%;
    margin-right: 30px;
}

#display2 img{
    width: 80%;
    height: 30%;
}

Here is the fiddle: https://jsfiddle.net/tk8gkrho/1/

I'm sorry it's kind of long, I'm still learning.