one div gets bigger while the other gets smaller

Question

I\'m new to javascript, I\'m wondering how to get .contact from a 30% width to 40% when I go with my mouse over .contact. This works, but while .contact gets bigger I want .

Answer 1

You don't need javascript for this, sibling selector works.
Or in javascript, shrink the div on the right while expanding the div on the left.

var width = 30;

var maxWidth = 40;

var interval = null;

var contact = document.getElementById("contact");
var div = document.getElementById("div");
function myMove() {
  interval = setInterval(function() {
    if (width>= maxWidth){
      return clearInterval(interval);
    }
    contact.style.width = ++width + "%";
    div.style.width = (100-width) + "%";
  },5);
}

.contact{
    background-color:red;
    width:30%;
    float:left;
}
.div{
    background-color: blue;
    width: 70%;
    float: right;  
}

                
        
                    
            
 Text
            
More textt
        

        

            
 Text
            
More textt