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;
}

kapa · Accepted Answer · 2013-09-20 14:38:35Z

7

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

answered Sep 20, 2013 at 14:38

kapa

78.9k21 gold badges166 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harry · Accepted Answer · 2013-09-20 15:23:24Z

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:

<a href='#showedClickable' class="clickable">Click Me!</a>

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.

edited Sep 20, 2013 at 15:23

answered Sep 20, 2013 at 14:41

Harry

90.1k26 gold badges216 silver badges224 bronze badges

6 Comments

kapa Over a year ago

+1 this is a nice idea if you do not care about old IE (8 or lower).

Harry Over a year ago

@bažmegakapa: Thanks mate. Went down this route as OP has tagged HTML5. Not sure if there is a need to support lower IE versions though.

Mansoorkhan Cherupuzha Over a year ago

upvoted thanks for the info about :target really helpful. but our old IEs :(

Harry Over a year ago

@user1876553: When should it be hidden? Page load (or) button click? In the current fiddle, it his hidden by default and displayed only when it is the target (meaning, only when its corresponding link is clicked).

user1876553 Over a year ago

So if I had multiple clickMe's when I click the second one the first should Disappear?

|

Collectives™ on Stack Overflow

Show on Click - CSS, HTML5

2 Answers 2

Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Related