Show on Click - CSS, HTML5 - css

Question

I've got a quick question:
I've got a quick table, in which there's something clickeable.
<table class ="tablez">
<tr>
<th>Table Title </th>
</tr>
<tr>
<td>
<a class="clickable">Click Me!</a>
<div id="showedClickable">
<p>This is showed when Click Me! is clicked.</p>
</div><!--EO showedClickable -->
</td>
</tr>
</table>
What I want to accomplish is:
#showedClickable {
position:absolute;
display:none;
width:auto;
height:auto;
}
This is the part I don't know how to 'phrase'...How do I do so that
a.clickable:focus + #showedClickable {
display:block;
}

Answer 1

The problem is that an a element without a href does not receive focus by default. This is why your code is not working. You should give it a tabindex to make it focusable.
<a tabindex="0" class="clickable">Click Me!</a>
jsFiddle Demo

Answer 2

If you want to show the div on click of a like your title indicates, you can do it by modifying the code as below:
HTML:
Click Me!
CSS:
#showedClickable:target {
display:block;
}
Fiddle
EDIT:
:target is a pseudo-class which matches an element whose id is the same as that of the fragment identifier of the URI.
URIs with fragment identifiers link to a certain element within the document, known as the target element. In this case, the target (href of anchor) is an element with id as showedClickable. Hence when the anchor is clicked, the content gets displayed.
You can find more details about :target pseudo-class here
Note: As bažmegakapa has pointed out in the comments, this method will not work in IE 8 and lower.