Afficher un div / masquer un autre

Par jim88, il y a 7 ans

Les bases HTML/CSS

Bonjour,

J'aimerai avoir un div qui s'affiche et un autre qui se masque en php/css :

"Cliquez pour voir le numéro de téléphone" et lorsque l'utilisateur clic dessus le numéro s'affiche en remplacant ce texte.

Voilà ce que j'ai fais en php/html:

<div class="conteneur_tel"> <?php if( !empty( $prop_agent_phone ) ) { ?> <a href="#voir"><?php echo("Cliquez pour voir le numéro");?></a> <div id="voir"><?php echo esc_attr( $prop_agent_phone ); ?></div> <?php } ?> </div>

Et voilà le css :

#voir { display: none; } #voir:target { display: block; }

C'est vraiment bête, mais il me manque juste la syntaxe css supplémentaire permettant de dire : je masque "Cliquez pour voir le numéro" une fois que c'est cliqué...

Merci à la communauté de bien vouloir m'aider ;)

2 réponses

Lardio, il y a 7 ans

Salut,
il y'a une volonte particuliere a vouloir utiliser du PHP ?
Car sinon je pense que ca sera plus simple via JS/jQuery.

Cdlt

StanislasP, il y a 7 ans

Pourquoi tous le monde veux passer par du js pour des opération simple ?

Un outil extremement simple exist : checkbox + label... (déja utiliser pour des menu hamburgeur, choix dans des formulaires etc pour ma boite)

<div class="conteneur_tel"> <?php if (!empty($prop_agent_phone)) { ?> <input type="checkbox" id="showTel-id" class="hideShow"> <label for="showTel-id"><?php echo("Cliquez pour voir le numéro");?></label> <div><?php echo esc_attr($prop_agent_phone); ?></div> <?php } ?> </div> input[type=checkbox].hideShow { display: none; } input[type=checkbox].hideShow ~ label { display: block; } input[type=checkbox].hideShow ~ div { display: none; } input[type=checkbox].hideShow:checked ~ label { display: none; } input[type=checkbox].hideShow:checked ~ div { display: block; }

Ainsi, la div vas être cacher par défaut et seulement lors de l'appuit sur le label la checkboxe sera cocher permettra l'affichage de la div tout en cachant le label.