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

260

12 декабря 2016, 10:04

<div class="sidebar_map_block" id="map"></div>
<button onclick="maxMap()">увеличить</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>

Answer 1

поставил в head
var mapWrap = document.getElementById("map");

На момент исполнения скрипта элемента ещё нет, поэтому document.getElementById("map") вернёт null. По хорошему, надо бы дождаться загрузки документа, а потом искать элемент. Другой рабочий вариант - поместить этот скрипт после элемента (или вообще в конец body). А я бы искал элемент непосредственно при клике - не вижу смысла держать лишнюю переменную.

Answer 2

Какой то шаблонизатор используете?

var mapWrap = document.getElementById(/* тут id блока */);
function maxMap() {
  mapWrap.style.height = '500px';
  // св-во style предоставляет доступ к свойствам стиля элемента
}

Теперь повесьте на клик функцию maxMap

На счет второго вопроса: у ya.map должен быть метод resize, нужно использовать его, потому что автоматически height не изменяется. ( не сильно знаком с api, поэтому точное название метода не скажу )