Showing/hiding elements inside a div block with HTML and CSS

Question

I would like to show/hide elements inside a div block. A similar post showed me how, but I can't make the links inside the div block work properly.

The div block:

<div   class="collapse"  tabindex="1">
<h1> Test </h1>
<p><a href="www.google.com">link</a></p>
<p>some other text</p>
</div>

The CSS part:

.collapse > * + *{
display:none;
}
.collapse:focus > * + *{
display:block; 
}

Here is a JSFiddle of my script.

Basically, as I click on the link, the div block collapse. Do you know how can I fix this? Thanks!!

The collapsed block disappears because it is only being shown on focus, once you click the link, it loses focus. If this is not the intended behavior you will have to solve the problem in a different way. — APAD1, Jun 09 '14 at 19:45

score 0 · Accepted Answer · answered Jun 09 '14 at 20:54

You can't do this natively with CSS, you'll have to use JavaScript. Here is my code:

HTML:

<h1><a href="#" class="clickme">Test</a></h1>
<div class="show-on-click">
    <a href="www.google.com">link</a>
    <p>some other text</p>
</div>

CSS:

.show-on-click {
    display: none;
}
.show-on-click.is-active {
    display: block;
}

JavaScript (jQuery):

$(".clickme").on("click", function () {
    $(".show-on-click").toggleClass("is-active");
});

I hope this all makes sense. Sorry I had to kind of massacre your code to achieve it. I've updated your jsfiddle here.

1 Answers1