OpenLayers 4.6.5 - jQuery : map disappears after hide() show() event

Question

This is a little example of what I'm trying to do : https://codepen.io/remifroger/pen/ZZWgbM

I would like to build a tabs design, with one map in each tab. I use jQuery to deal with it but I have a trouble when I resize the window.

I already tested to use map.updateSize() in each click event but it doesn't work, do you have any ideas to fix this behavior ?

EDIT

Problem comes from the hide() method which applies a display: none on a parent element of my div containing the map => it also affects a display: none on the map div's; and this generates the unwanted behaviors

So to fix the problem, instead of show() and hide() methods, I use the visibility property (with jQuery : $("#id").css('visibility', '...')) which doesn't generate any display: none

And I put the content of the tab content in position: absolute to eliminate spaces

I updated the CodePen, but I'm still open to any improvement, this method doesn't seem optimal !

Answer 1

Try using map.setTarget(none) before your .hide()method and then map.setTarget(yourMapContainer) and map.updateSize() after your .show() method.