Как поставить раскрывающийся блок div?

<div class="sidebar_map_block" id="map"></div>
<button>увеличить</button>

поставил в footer заработал

<script>
var mapWrap = document.getElementById("map");

function maxMap() {
  mapWrap.style.height = '500px';
  // св-во style предоставляет доступ к свойствам стиля элемента
}
</script>

Сейчас появилась другая проблема, яндекс карты не раскрываются по идеи там element style стоит на 100% ширину diva

вот код самого яндекса

<div id="[[+mapId]]" [[+style]]></div>
<script type="text/javascript">
    ymaps.ready(function(){
        [[+mapId]] = new ymaps.Map("[[+mapId]]", {
            center: [[+map.center]],
            zoom: [[+map.zoom]]
        });
        [[+mapId]].setType("[[+map.type]]");
        var [[+mapId]]Controls = "[[+controls]]".split(',');
        for(var i = 0; i < [[+mapId]]Controls.length; i++){
            [[+mapId]].controls.add([[+mapId]]Controls[i]);
        }
        [[+placemarks]]
        [[+polylines]]
        [[+polygons]]
        [[+routes]]
    });
</script>