leaflet開閉にすると、表示がおかしくなる

表題の件ですが、leafletの地図を開閉できるようにしたいのですが、
display:noneにして、ボラン操作で開閉できるようにすると、地図がうまく表示されなくなります。

こんな感じです。。

色々調べると、invalidateSize()メゾットを使えば良いらしいのですが、うまくいきません。。

コードは以下となります。

slim
1
2/ 地図
3- unless @spots == "[]"
4  .map-button
5    p スポットマップを開く
6  #mapcontainer
7
8/ 地図
9javascript:
10  var map = L.map('mapcontainer');
11  var spots = #{ @spots } ;
12
13  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
14    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
15  }).addTo(map);
16
17  Markers = L.featureGroup();
18
19  spots.forEach(function(spot){
20    Markers.addLayer(L.marker([spot.lat_deg,spot.lon_deg]).bindPopup(`<a href="../spots/${spot.id}">${spot.title}</a>`).addTo(map));
21  })
22  map.fitBounds(Markers.getBounds());
23
24  var status = "close";
25
26  document.querySelector(".map-button").onclick = function() {
27
28    map.invalidateSize();
29
30    $("#mapcontainer").slideToggle();
31    if ( status == "open") {
32      $(".map-button p").text("スポットマップを開く");
33      status = "close";
34    }else {
35      $(".map-button p").text("スポットマップを閉じる");
36      status = "open";
37    }
38  };