Afficher/Masquer du texte à partir d'un link

**bruno-1226** · 26/09/2016, 14h45

Bonjour à tous,

J'aimerais pouvoir afficher du texte(qui est masqué en css), cela en cliquant sur un simple link(lien ou balise <a>).

Mais le souci c'est que lorsque je clique sur le lien, le texte s'affiche pour quelques millièmes de secondes.

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<h2 class="link"><a href="" onclick="display('text');">Lien</a></h2>
 
<div id="text">texte à afficher</div>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#text {
 
    display: none;
 
}

javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function display(id) {
 
  if (document.getElementById("text").style.display=="none") {
 
    document.getElementById(id).style.display = "block";   
 
  }
 
  else {
 
    document.getElementById("text").style.display = "none";
 
  }
 
}

Merci d'avance pour votre aide

Cordialement

**eleydet** · 26/09/2016, 20h09

Bonsoir,

Le lien pointe sur... rien?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="" onclick="display('text');">

**Beginner.** · 26/09/2016, 22h33

Salut,

Ouais je crois que eleydet a mis le doigt sur le problème : en mettant href="#" cela fonctionne mais il y a un truc étrange : au premier clique la condition document.getElementById(id).style.display == "none" n'est pas vraie apparemment du coup le texte ne s'affiche pas la première fois mais après c'est bon...

Ce problème est peut-être aussi lié à ce href="#", en tous cas en mettant le style dans la balise : <div id="text" style="display: none;">ça fonctionne dés le premier clique, tu peux tester ici :
http://jsbin.com/gahikuxewu/edit?html,js,output

**danielhagnoul** · 26/09/2016, 23h50

@Beginner : bien vu.

La même chose dans une forme plus moderne. Noter la modification du style dans le code JS et le traitement de l'événement "click" (ev.preventDefault() ev.stopPropagation()) pour empêcher le rechargement de la page web à cause de l'attribut "href".

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    
  </style>
  <script>
    'use strict';
 
    document.addEventListener( 'DOMContentLoaded', function( ev ){
      
      document.querySelector( "#monTexte" ).style.display = "none";
      
    });
    
    window.addEventListener( 'load', function( ev ){
      
      function displayMonTexte(){
        const
          elemMonTexte = document.querySelector( "#monTexte" );
          
        if ( elemMonTexte.style.display === "none" ) { 
          elemMonTexte.style.display = "block";    
        } else {
          elemMonTexte.style.display = "none";
        }
      }
      
      document.querySelector( "h2.link > a" ).addEventListener( 'click', function( ev ){
        ev.preventDefault();
        ev.stopPropagation();
        
        displayMonTexte();
      });
      
    });
  </script>
</head>
<body>
  <main>
    <h2 class="link">
      <a href="">Lien</a>
    </h2>
    <div id="monTexte">
      <p>texte à afficher</p>
    </div>
  </main>
</body>
</html>

**Beginner.** · 27/09/2016, 18h31

Merci c'est instructif...

**NoSmoking** · 01/10/2016, 10h37

Bonjour,

J'aimerais pouvoir afficher du texte(qui est masqué en css), cela en cliquant sur un simple link(lien ou balise <a>).

au départ ce n'est quand même pas le but des éléments <a>.

Il existe l'élément <button> qui rempli tout à fait cette fonction, qui est « stylable » à souhait, et avec qui on n'a pas à se soucier de la propagation des événements.

Avec HTML5 il est apparu l'élément <details> malheureusement pas encore bien pris en compte mais prometteur, il existe toutefois des polyFill.

Enfin il existe une solution en pur CSS3 avec les pseudo-classe comme :checked, mais cela il faut surcharger le HTML.

Afficher/Masquer du texte à partir d'un link

JavaScript

Vue hybride

Discussions similaires

Partager

Partager