Jquery div larger then smaller again with click on div

I'm new to Jquery and could need some help.

http://ift.tt/1G6YMGa

After the div animates to 400px, i want it to go back down to 200px. What am i doing wrong?

$(document).ready(function () {

    if ($("#boks1").width() == 200) {

        $("#boks1").click(function () {
            $("#boks1").animate({
                width: "400px"
            });
        });


    } else {

        $("#boks1").click(function () {
            $("#boks1").animate({
                width: "100px"
            });
        });

    }

});

html {
    width: 100%;
}
#test {
    background-color: blue;
    height: 400px;
    width: 400px;
    margin: auto;
    animation: new-post 1s ease infinite;
}
#wrapper {
    height: 500px;
}
.container {
    background-color: black!important;
    margin-bottom: 40px!important;
}
#boks1 {
    height: 400px;
    width: 200px;
    background-color: red;
}
#boks2 {
    height: 400px;
    width: auto;
}
#boks3 {
    height: 400px;
    width: auto;
}
#boks4 {
    height: 400px;
    width: auto;
}

<script src="http://ift.tt/1oMJErh"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div id="boks1"></div>
        </div>
        <div class="col-sm-3">
            <div id="boks2"></div>
        </div>
        <div class="col-sm-3">
            <div id="boks3"></div>
        </div>
        <div class="col-sm-3">
            <div id="boks4"></div>
        </div>
    </div>
</div>