Simple query here (I believe)
I have a DIV with the class "container" acting as my Map. The Highcharts plugin I'm using is responsive, but it only resizes when the window does.
I'm looking to manually trigger a resize without adjusting my window size. To explain further, when I click on a State, another DIV will appear beside it. In order for this new content to display properly, I need to resize my "container", but currently the map only recalculates its size upon window resize. I simply want to trigger the map resize within my function that displays the additional DIV.
This is how my code looks:
HTML:
<div class="container"></div>
<div class="info-maps"></div>
CSS:
.container{
width: 100%;
float: left;
}
.info-maps{
width: 50%;
display: none;
float: left;
}
.info-maps-show{
display: block !important;
}
.container-resize{
width: 50% !important;
}
Javascript (jQuery):
$(**State**).click(function(){
$('.container').addClass('container-resize');
$('.info-maps').addClass('info-maps-show');
//Here's where I need to resize the map :)
}