[Résolu] Faire disparaître un DIV au clic

Bonjour.

Je ne suis aucunement bon connaisseur du CSS et encore moins des actions qui peuvent être obtenues grâce à lui ; donc, je voudrais savoir si, uniquement avec du CSS, je peux faire disparaître un div au clic souris. Avec #ledivamasquer:hover, j'y arrive (display: none;), mais évidemment c'est temporaire (c'est le passage de la souris qui fait réagir, non le clic).

HTML (exemple)

<div id="div1">
  <p>texte 1</p>
</div>
<div id="ledivamasquer">
  <p>texte 2</p>
</div>
<div id="div3">
  <p>texte 3</p>
</div>

CSS

#div1 {
  background: lightyellow;
}
#ledivamasquer {
  background: silver;
}

#ledivamasquer:hover {
  display: none;
}

#div 3 {
  background: green;
}

Désolé si la question est très basique : elle ne l'est pas pour moi. D'autant que je n'arrive pas à comprendre :focus et :target...

Merci pour toute aide.

salut,

il te faudra passer par du javascript afin d'obtenir l'effet désiré

Bonjour Piteur,
A ma connaissance (mais je suis pas expert donc je peux me tromper^^) ce n'est pas possible en CSS pur.
Cependant, avec un peu de javascript ce n'est pas bien compliqué: tu crées deux classes CSS, une en "display: none" et une en "display: block" (par exemple). Et en javascript tu fais juste une petite fonction qui supprime / ajoute les classes qui vont bien.

HTML

<div id="div1">
  <p>texte 1</p>
</div>
<div id="ledivamasquer" onClick="masquerlediv()" class="le_div_visible">
  <p>texte 2</p>
</div>
<div id="div3">
  <p>texte 3</p>
</div>

CSS

#div1 {
  background: lightyellow;
}
.le_div_visible {
display: block;
  background: silver;
}

.le_div_masque {
  display: none;
}

#div 3 {
  background: green;
}

Javascript

function masquerlediv(){
  var container_Elt = document.getElementById('ledivamasquer');
  container_Elt.classList.add("le_div_masque");
  container_Elt.classList.remove("le_div_visible");
}

Bonjour,
cherche "css hide div click without javascript", on trouve par exemple :
http://css-workshop.com/css-show-hide-div-without-javascript/

Compatibilité non garantie, à ta place j'utiliserais Javascript

@Mathieu8337 : D'accord. Merci pour cette réponse détaillée et tout de suite utilisable... Je m'y remets !

Je laisse toutefois le sujet ouvert, car quelqu'un d'autre connaître peut-être une astuce CSS3...
Modifié par Piteur511 (22 Aug 2019 - 14:28)

Piteur511 a écrit :
@Mathieu8337 : D'accord. Merci pour cette réponse détaillée et tout de suite utilisable... Je m'y remets !

Je laisse toutefois le sujet ouvert, car quelqu'un d'autre connaître peut-être une astuce CSS3...

lis mon message, tu as ta réponse

farang a écrit :
http://css-workshop.com/css-show-hide-div-without-javascript/
Compatibilité non garantie, à ta place j'utiliserais Javascript

Merci, Farang. Pourquoi ce doute sur la compatibilité ? En plus, un souci : il reste toujours le bouton à cocher...

Au fait, quelqu'un pourrait-il m'expliquer l'utilisation de :focus et/ou :target ? C'est complètement obscur pour moi !

Merci.
Modifié par Piteur511 (22 Aug 2019 - 14:32)

Bonjour,

J'ai testé avec succès votre proposition sur firefox (78.0.2 (64 bits)) mais elle ne fonctionne pas sur safari (Version 13.1.2 (14609.3.5.1.5)), les deux sur mac (Mojave 10.14.6 (18G6020)).

Bonjour,

Vieux sujet, mais voici quand même une solution sans javascript et sans balise additionnelle dans le html, qui fait disparaitre un div via un click.

Après bon, l'effet est vraiment éphémère vu que le div réapparait dès qu'on clique ailleurs !

Html (notez le tabindex="-1" qui fait toute la différence) :

<div id="div1">
<p>texte 1</p>
</div>
<div id="ledivamasquer" tabindex="-1">
<p>texte 2</p>
</div>
<div id="div3">
<p>texte 3</p>
</div>

Css :

#div1 {
	background: lightyellow;
}
#ledivamasquer
{
	display: block;
	background: silver;
	outline: 0;
}
#ledivamasquer:focus
{
	height: 0;
	overflow: hidden;
}
#div3
{
	background: green;
}
p
{
	padding: 1rem;
	margin: 0;
}

Et un petit jsfiddle pour tester : https://jsfiddle.net/y2zmw0vh/

Amicalement,
Modifié par parsimonhi (29 Aug 2020 - 16:01)

Jean-Pierre-Bruneau a écrit :

Bien sur et encore plus puissant, une case à cocher qui est invisible et se coche ou se décoche pour faire apparaître ou disparaître le fameux menu responsive !! là encore aucun JS
https://codepen.io/jplyne/pen/mdJPKyV

Oui, c'est mieux que du js. Mais justement, il faut rajouter une "case à cocher" (ce qui n'est pas optimal), et en plus la rendre invisible (ce qui est carrément "tricky"). Selon moi, la case à cocher, c'est moins bien (bien qu'il m'arrive de l'utiliser aussi, par facilité).

On pourrait aussi utiliser un lien vers une ancre, et dans le css :target. C'est selon moi mieux que la case à cocher, mais on a besoin d'une balise <a>, ça "alourdit" l'url, et il faut ajouter ces ancres (et en plus, on ne peut pas mettre ce qu'on veut dans une balise <a>, en particulier pas de <div> en théorie, donc il faut pas mal bricoler pour faire marcher la disparition d'une <div>). Donc ça me semble moins bien que la solution avec le tabindex="-1".

Amicalement,

parsimonhi a écrit :


On pourrait aussi utiliser un lien vers une ancre, et dans le css :target. C'est selon moi mieux que la case à cocher, mais on a besoin d'une balise <a>, ça "alourdit" l'url, et il faut ajouter ces ancres (et en plus, on ne peut pas mettre ce qu'on veut dans une balise <a> en particulier pas de <div> en théorie, donc il faut pas mal bricoler pour faire marcher la disparition d'une <div>). Donc ça me semble moins bien que la solution avec le tabindex="-1".

Amicalement,

Si ton <a> se situe entre des éléments de type block ( et pas de texte autour ) et n'est ni enfant d'une balise de type phrasing content ( <p> par exemple ) , il peut être parent d'une balise div . Cependant ,Pour un usage d'ancre , il n'est pas nécessaire, une id fait parfaitement l'affaire.

Sinon, Il peut aussi être plus simple de positionner cet ancre devant le div et cibler le div avec a:focus + div ou a:target + div pour ne pas avoir a se servir de l'id comme sélecteur. input:checked + div même approche que <a> et plus simple pour un voir/cacher .

Selon le contexte , ces possibilités peuvent convenir.

- : focus si tu clique ailleurs, il est perdu

- :target la page scroll jusqu'a l'ancre si besoin, il faut modifier l'url pour perdre les styles ou les appliquer à un autre éléments

- input:checked (checkbox ou radio selon) avec son label rend la gestion via CSS plutôt aisé en faisant économie d'un script, mais nécessite une architecture compatible avec les sélecteur CSS qui ne peuvent que parcourir le DOM dans un sens .

Enfin, si l'architecture permet l'usage du sélecteur + , un seul sélecteur dans la feuille de style peut servir a de multiples éléments , si l'architecture ou les navigateur ciblés ne le permettent pas, alors , c'est du JavaScript qu'il faut mettre en œuvre

Cdt