Afficher/Masquer du texte à partir d'un link

Version imprimable

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:

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

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

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

26/09/2016, 20h09
eleydet

Bonsoir,

Le lien pointe sur... rien?

Code:

<a href="" onclick="display('text');">
26/09/2016, 22h33
Beginner.

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

@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:

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>

27/09/2016, 18h31
Beginner.

Merci c'est instructif...
01/10/2016, 10h37
NoSmoking

Bonjour,

Citation:

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.