The problem
The problem with your link is that the "open" div loses its focus when you click it. The browser resets the focus when navigating the anchor link. Since the whole solution is based on the focus being on the div, it will break if the focus goes elsewhere. Using the "tab"-key will also move the focus, causing the div to close.
Alternative solution #1
You can instead try out the first solution in the thread you linked to. There, checkboxes are instead used to let users toggle open the divs. The drawback there is that the checkboxes are independent of each other, so toggling the second div will make no change to the first divs state.
Alternative solution #2
If the last point above is important, then a slightly modified version using radio buttons might work:
http://jsbin.com/noxozedofo/2/edit
In this version, we're using two radio buttons (as opposed to checkboxes, which was used in the answer you linked to). Labels wrap the clickable headers to make them target the radio buttons when clicked. When a div is clicked, the radio button will become checked, which makes it possible to use the :checked pseudo selector to style the div. Anchor links are no longer a problem since the radio buttons will keep their state.
The drawback here is that you cannot click a radio button again to "uncheck" it. The only way to do that is to click the other div.
Here's what this solution looks like in code:
<label class="collapse" for="_1">
<h2>Collapse 1</h2>
</label>
<input id="_1" type="radio" name="test">
<div>Content 1</div>
<label class="collapse" for="_2">
<h2>Collapse 2</h2>
</label>
<input id="_2" type="radio" name="test">
<div>
Content 2...
<a href="#link">link</a>
</div>
.collapse{
display:block;
}
.collapse + input{
display:none;
}
.collapse + input + *{
display:none;
}
.collapse+ input:checked + *{
display:block;
}
