Swap css class

http://stackoverflow.com/questions/16490052/if-else-in-div-statement/16490936#16490936

HTML

<div id="status" class="active">Status</div>
<div id="status1" class="active1">Status</div>
<button id="toggle">Toggle</button>
<button id="toggle1">Toggle</button>

CSS

.active {
    background-color: green;
    position:absolute;
    top:40px;
    width:200px;
    height:200px;
    margin-left:0px;
    
}

.inactive {
    
    background-color: red;
    position:absolute;
    top:60px;
    width:200px;
    height:200px;
}



.active1 {
    background-color: green;
    position:absolute;
    top:40px;
    width:200px;
    height:200px;
    
    margin-left:230px;
    
}

.inactive1 {
    
    background-color: red;
    position:absolute;
    top:60px;
    width:200px;
    height:200px;
    margin-left:230px;
}

JavaScript

var btn = document.getElementById("toggle");
var btn1 = document.getElementById("toggle1");

btn.onclick = function() {
    var statusDiv = document.getElementById("status");
    var status = statusDiv.className;
     var statusDiv1 = document.getElementById("status1");
    var status1 = statusDiv1.className;
    if (status == "active") {
        statusDiv.className = "inactive";
        statusDiv1.className = "active1";
    }
    else {
        statusDiv.className = "active";
        statusDiv1.className = "inactive1";
        
    }
};

btn1.onclick = function() {
   var statusDiv = document.getElementById("status");
    var status = statusDiv.className;
     var statusDiv1 = document.getElementById("status1");
    var status1 = statusDiv1.className;
    if (status1 == "inactive1") {
         statusDiv.className = "inactive";
        statusDiv1.className = "active1";
    }
    else {
        statusDiv1.className = "inactive1";
        statusDiv.className = "active";
    }
};