Хочу реализовать на сайте страницу точки продаж: сверху высокий блок с Гугл (Яндекс) картой, под ним 3 коротких блока в колонку с описанием конкретных магазинов. в каждом из описании есть кнопка "показать адрес".
1) как реализовать по нажатию на эту кнопку
смену встраиваемой карты? (не обязательно на примере карты, в примере прикрепил код, подчеркну, задача в том, чтобы при нажатии на кнопку изменялся сам блок, а не его цвет)
2) отдельно буду признателен, если реализация подойдёт для n-ого количества магазинов, т.е. автоматически будет высчитываться порядковый номер кнопки и относительно него будет отображаться контент в блоке.
<div class="shop shop-1">1</div>
<div class="shop shop-2">2</div>
<div class="shop shop-3">3</div>
<button class="shop__btn shop__btn-1">показать 1</button>
<button class="shop__btn shop__btn-2">показать 2</button>
<button class="shop__btn shop__btn-3">показать 3</button>
Хочу реализовать на сайте страницу точки продаж: сверху высокий блок с Гугл (Яндекс) картой, под ним 3 коротких блока в колонку с описанием конкретных магазинов. в каждом из описании есть кнопка "показать адрес".
как реализовать по нажатию на эту кнопку смену встраиваемой карты? (не обязательно на примере карты, в примере прикрепил код, подчеркну, задача в том, чтобы при нажатии на кнопку изменялся сам блок, а не его цвет)
отдельно буду признателен, если реализация подойдёт для n-ого количества магазинов, т.е. автоматически будет высчитываться порядковый номер кнопки и относительно него будет отображаться контент в блоке. введите сюда описание изображения
.shop {
width: 100%;
height: 100px;
color: #fff;
}
.shop-1 {
background: red;
}
.shop-2 {
background: blue;
}
.shop-3 {
background: yellow;
}