Показать / Скрыть данные в div в одном месте?

Question

У меня сейчас что-то вроде этого: , и я работаю над тем, чтобы сделать его более похожим на:

Это не самая сложная часть, я в основном сделал это (благодаря ответу на предыдущий вопрос, он выглядит как первое изображение на узком экране / мобильном телефоне и второе на больших экранах, планшетах и ​​т. Д.)

Зеленая пунктирная область будет div, и под ней вы увидите две кнопки. Мне нужно спрятать карту (в этом случае переместите ее в крайнее левое положение, потому что GoogleMap не любит иметь скрытый / 0px div), и я собираюсь использовать Spacetree из TheJIT для цепочка отчетности. Мы уже используем jQuery, так как лучше всего переключать div с зелеными точками (мы будем называть его .movingcontainer) между картой и деревом, когда нажимаются кнопки под ним?

Я знаю, что этот вопрос задавался много раз, и я просматриваю некоторые другие вопросы, чтобы выяснить, не были ли они похожей ситуацией.

Answer 1

Если они имеют абсолютное отображение (сверху: что угодно; слева: что угодно), можно просто сложить 2 делителя друг на друга, а затем изменить их z-индекс, чтобы поставить один перед другим, в зависимости от того, какой кнопка нажата.

EDIT

Просто чтобы лучше объяснить мой второй комментарий. Допустим, у вас есть <div id="googlemap"> и <div id="otherdisplay">. Оба могут содержаться в пределах <div id="container">. Тогда CSS может выглядеть примерно так:

#container {

}

#googlemap {
     position:relative;
     top:0;
     left:0;
     z-index:10;
     max-width:100%;
     overflow:hidden;
}

#otherdisplay {
     position:relative;
     top:0;
     left:0;
     z-index:1;
     max-width:100%;
     overflow:hidden;
}

Вы можете оформить свой контейнер так, как вам нужно, чтобы переместить его, и 2 элемента в нем должны просто перемещаться вместе с ним и изменять размер при необходимости.

Answer 2

Вы уверены, что скрыть googlemaps div не получится?

как обращаться с картой Google внутри скрытого div (обновленная картинка)

Согласно этому вопросу / ответу, вы должны иметь возможность использовать display:none для своего googlemaps div. Затем, когда вам это понадобится, просто используйте jQuery, чтобы дать googlemaps div этот CSS: display:block.