Hide/Show un Span

hatfab
Javascript

Bonjour,
Je cherche à faire faire apparaitre un texte dans une span en <code>display : none;</code> lorsque l'on clique sur une icône. Pour l'instant ça ne marche pas vraiment mais je sens que je ne suis pas loin. Voici la ligne HTML concernée :

<?php if(get_field('telephone')) : ?><li><a href="#"><i id="phone-icon" onclick="afficher_masquer();" class='ioa-front-icon phone-squaredicon- '></a></i>&nbsp;&nbsp;<span id="phone"><?php echo the_field('telephone'); ?></span></li><?php endif; ?>

Et le script qui va avec :

<script type="text/javascript">
     function afficher_masquer() {document.getElementById('phone').style.display = "";};
</script>

Pour info, si je mets le <code>onclick="afficher_masquer();"</code> dans la SPAN ça marche. Mais moi je veux que l'on clique sur l'icône.
L'autre truc c'est que quand on clique sur l'icône, on est redirigé en haut de la page alors que bien sûr il faudrait que l'on reste à l'endroit ou l'on clique.

Merci de votre aide !

14 réponses

Marechoux
Réponse acceptée

Je n'ai pas ce soucis chez moi du coup je te propose d'essayer quelques petites choses:

  1. Remplacer la valeur de l'attribut href de ton lien par javascript:void(0)
  2. Ajouter un attribut onclick à ton lien ayant comme valeur "return false;"
Lartak

Bonjour.
Il te faut mettre l'attribut onclick dans la balise du lien, ce qui fait :

<a href="#" onclick="afficher_masquer();">
hatfab
Auteur

Salut Lartak,
Merci de ta réponse. Ça ne fonctionne pas comme ça. Le numéro n'apparait pas et je suis toujours redirigé vers le haut de la page.

hatfab
Auteur

Salut Lartak,
Merci de ta réponse. Ça ne fonctionne pas comme ça. Le numéro n'apparait pas et je suis toujours redirigé vers le haut de la page.

tleb

Salut,

  • le &nbsp;&nbsp; pour formatter, c'est un peut un hack. Utilise plutôt les margins et paddings.
  • c'est quoi que tu veux faire apparaître et disparaître ? le span, le a, le li ? Il faut choisir.
hatfab
Auteur

Salut tleb,
Oui, c'est débile mon double <code> </code>.
Ce que je veux faire apparaitre c'est la span qui contient le numéro de téléphone en cliquant sur l'icône du téléphone, je le dis dans mon premier post.
Voici le screenshot du truc :

Et évidemment que l'on reste ç cet endroit qu'on on clique.

Marechoux

Hello, pour éviter un changement de page tu dois simplement ajouter un "return false;" à la fin de ta fonction JS.
Si j'ai bien compri ce que tu souhaites ceci fonctionne chez moi:

<script type="text/javascript">
     function afficher_masquer() {document.getElementById('phone').style.display = "";return false;};
</script>
hatfab
Auteur

Et bien pas chez moi. Lorsque je clique sur le téléphone je me retrouve en haut de la page et le numéro n'apparait pas.
Une autre idée ?

Marechoux

Si tu déplaces le onclick="afficher_masquer();" sur la balise li directement, ça fonctionne ?

hatfab
Auteur

Non plus…

<?php if(get_field('telephone')) : ?><li onclick="afficher_masquer();"><a href="#"><i id="phone-icon" class='ioa-front-icon phone-squaredicon- '></a></i><span id="phone"><?php echo the_field('telephone'); ?></span></li><?php endif; ?>

#phone{
  display: none;
margin-left : 10px;
}
<script type="text/javascript">
    function afficher_masquer(){document.getElementById('phone').style.display = "";return false;};
</script>
Marechoux

Et comme ceci (diplay: inital) ?

<script type="text/javascript">
    function afficher_masquer(){document.getElementById('phone').style.display = "initial";return false;};
</script>
hatfab
Auteur

Oui, là ça marche, ça affiche bien le numéro, mais ça me renvois toujours en haut de la page.

hatfab
Auteur

C'est bon, ça marche ! Sans avoir à mettre <code> onclick="return false;"</code>.
Ça donne ça :

<?php if(get_field('telephone')) : ?><li onclick="afficher_masquer();"><a href="javascript:void(0)"><i id="phone-icon" class='ioa-front-icon phone-squaredicon- '></a></i><span id="phone"><?php echo the_field('telephone'); ?></span></li><?php endif; ?>

Merci pour cet accompagnement dominical !

Marechoux

Avec plaisir !