Affichage/masquage d'éléments dans un bloc div avec HTML et CSS

Question

Je souhaite afficher/masquer des éléments dans un bloc div. Un post similaire m'a montré comment, mais je ne peux pas faire fonctionner correctement les liens à l'intérieur du bloc div.

Le bloc div:

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

La partie CSS:

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

Voici un JSFiddle de mon script.

Fondamentalement, lorsque je clique sur le lien, le bloc div s'effondre. Savez-vous comment puis-je résoudre ce problème? Merci!!

Answer 1

Vous ne pouvez pas le faire nativement avec CSS, vous devrez utiliser JavaScript. Voici mon 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"); 
}); 

J'espère que tout cela est logique. Désolé, j'ai dû massacrer votre code pour y arriver. J'ai mis à jour votre jsfiddle here.