How to open div on clicking the link?

Good afternoon. At the moment I have it. How you can do so by clicking on a link, opened the first div. On the second, and so on. I can clutter up the JS and make the image first. But you like to avoid? How to bind "a href" to the "div" maybe?
July 9th 19 at 10:37
5 answers
July 9th 19 at 10:39
Solution
$(this).next().show(); and id must be unique (use classes).

codepen.io/anon/pen/BzaqGW
And it is possible to carry out the closing of the previous diva when you open next? - dannie commented on July 9th 19 at 10:42
July 9th 19 at 10:41
Solution
Without js
codepen.io/aliencash/pen/xOxyBN
So on second click the div closed change radio to checkbox
Damn. I'm really confused.
codepen.io/hlopka/pen/ezYjLY
Can show\tell on the example of one city.
So when you click on the link, was not a mere marker, but there I need the div on the map (say to the left of the marker), where I plan to write contact info. There is still when you first open maps marker stands at the head office, and we need to div with him was open. - dannie commented on July 9th 19 at 10:44
: You have it all in js. Tie my version is impractical.
codepen.io/aliencash/pen/wWvQaP - dannie commented on July 9th 19 at 10:47
: =( - Graham.Bernhard commented on July 9th 19 at 10:50
This approach is best used only in extreme cases, strictly when the task is to mark up a site with spoilers, which will work well with JavaScript turned off. Use the checkboxes to style semantically incorrect. - dannie commented on July 9th 19 at 10:53
July 9th 19 at 10:43
Solution
codepen.io/aliencash/pen/wWvQaP And can you please show here. How it can be implemented on the example of two cities at least. So when you click the div spilling out? - dannie commented on July 9th 19 at 10:46
Very save! - dannie commented on July 9th 19 at 10:49
Oh. More precisely, here: codepen.io/hlopka/pen/ezYjLY :) - Graham.Bernhard commented on July 9th 19 at 10:52
July 9th 19 at 10:45
Solution
Solved the issue like this:

var it_last;
function toggle(it) { 
 if ((it_last)&&(it!=it_last)) {// hide previous
 it_last.style.display = "none"; 
}

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

 it_last = it; 
}


AND HTML:

<span onclick="toggle(document.getElementById('hide1'))">
Moscow
</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"> 
Address in Moscow
</div>
July 9th 19 at 10:47
What browser are testing?
Chrome and Firebug - dannie commented on July 9th 19 at 10:50

Find more questions by tags CSSHTMLjQuery