Как открывать див по клике на ссылку?

Question

[Сергей]

Добрый день. В данный момент имею это. Как можно сделать чтобы по нажатию на одну ссылку, открывался первый див. На вторую второй, и тд. Я могу захламить JS и сделать по образу и подобию первого. Но можно этого как то избежать? Как то осуществить привязку "a href" к "div" может быть?

Answer 1

[Котик Антон]

$(this).next().show(); и id должны быть уникальными (используйте классы).

codepen.io/anon/pen/BzaqGW

Comments

[Сергей]

А можно осуществить закрытие предыдущего дива при открытие следущего?

Answer 2

[Андрей Федоров]

Без js
codepen.io/aliencash/pen/xOxyBN
Чтобы по второму клику div закрывался поменяйте radio на checkbox

Comments

[Сергей]

Блин. Я совсем запутался.
codepen.io/hlopka/pen/ezYjLY
Можете показать\подсказать на примере одного города.
Чтобы при клике на ссылку, двигался не только маркер, но и появлялся нужный мне div на карте (допустим слева от маркера), я там планирую писать контактную инфу. Там еще при первом открытии карты маркер стоит на головном офисе, и нужно чтобы див с ним был открыт.

[Андрей Федоров]

Сергей: У вас там все на js. Прикручивать мой вариант нецелесообразно.
codepen.io/aliencash/pen/wWvQaP

[Сергей]

Андрей Федоров: =(

[Petr Flaks]

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

Answer 3

[lega]

codepen.io/anon/pen/xOxQdG?editors=1000

Comments

[Сергей]

codepen.io/aliencash/pen/wWvQaP А можете пожалуйста вот здесь показать. Как это можно реализовать на примере двух городов хотябы. Чтобы при клике div вываливался?

[Сергей]

Очень спасете!

[Сергей]

Ой. Точнее вот тут: codepen.io/hlopka/pen/ezYjLY :)

Answer 4

[Сергей]

Решил вопрос вот так:

var it_last;
function toggle(it) { 
    if ((it_last)&&(it!=it_last)) {// скрытие предыдущего
        it_last.style.display = "none"; 
    }

    it.style.display= (it.style.display=="none") ? "block" : "none";  

    it_last = it; 
}

И HTML:

<span onclick="toggle(document.getElementById('hide1'))">
Москва
</span>

<div id="hide1" style="display:none; z-index: 9999; position: absolute; margin-left: 10px; bottom: 80%; width: 400px; height: 100px; background-color: rgba(134, 117, 80, .7); border-radius: 50px"> 
Адрес в Москве
</div>

Answer 5

[Иван Водянов]

В каком браузере тестируешь?

Comments

[Сергей]

Chrome и Firebug