Show on Click - CSS, HTML5

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