Afficher un div / masquer un autre

jim88
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

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

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.