How to change height of the map element on button click?

Question

I want to remove the styling back and forth on button click but when i try to resize now the map is rendering all over the screen but without any background, only the markers that were on it.

So basically i want to remove the styling and hide the list element and only display the map element on one click and on the next one to display again the list and to resize the map how it was initially.

any ideas ?

**Updated**

  **aura component** 

<aura:component >
<aura:attribute name="map" type="Object"/>
<aura:attribute name="buttonstate" type="Boolean" default="false"/>

<div aura:id= "screen">        
 <div id="map" aura:id="mapSize" class="mapSize" style="position:relative;">   
        <lightning:button class="button" aura:id="buttonList" label="Button" onclick="{!c.handleClick}" />
 </div>
</div>
   <div  aura:id="listDiv" class ="listDiv">
   <c:List  />
    </div>        
  </div>       
</aura:component>

**CSS**

   .cAccountMap .mapSize{
   width: 100%;
   height: 80%; 
}

.cAccountMap .mapTestSize{
    height: 100%;
}


.THIS .listDiv{
 height: 20%;
}

}

**Javascript** 

   handleClick : function(component,event,helper){
      var buttonName = event.getSource();
      var elements = document.getElementsByClassName("listDiv");
     var buttonstate = component.get('v.buttonstate');
    var cmpTarget = component.find('mapSize');
    if(buttonstate==false){
        buttonName.set('v.label', 'LALA');
        elements[0].style.display = 'none';
        $A.util.removeClass(cmpTarget, 'mapSize');
        $A.util.addClass(cmpTarget, 'mapTestSize');      
    }else{
        buttonName.set('v.label', 'gogo');
        elements[0].style.display = '';
        $A.util.addClass(cmpTarget, 'mapSize');

        $A.util.removeClass(cmpTarget, 'mapTestSize');  
    }
    component.set('v.buttonstate', !buttonstate);

}

Answer 1

After multiple tries  i managed to find the solution 
aura component is the same

css 
.cAccountMap .mapSize{
  width: 100%;
  height: 65%; 
}

.THIS .listDiv{
 height: 35%;
}

.THIS .listHideDiv{
 height: 0%;
}

Javascript

 handleClick : function(component,event,helper){
    var changeViewButton = event.getSource();
    var listDiv = document.getElementsByClassName("listDiv");
    var mapDiv = document.getElementsByClassName("mapSize");
    var buttonstate = component.get('v.buttonstate');
    var cmpList = component.find('listDiv');

    if(buttonstate==false){
        changeViewButton.set('v.label', 'lala');
        listDiv[0].style.display = 'none';
        mapDiv[0].style.height = '100%';
        $A.util.addClass(cmpList, 'listHideDiv');
    }else{
        changeViewButton.set('v.label', 'gogo');
        $A.util.removeClass(cmpList, 'listHideDiv');
        listDiv[0].style.display = '';
        mapDiv[0].style.height = '65%';
    }
    component.set('v.buttonstate', !buttonstate);

}

So basically the map height style was changed from javascript