Faire disparaitre/réapparaitre du texte en appuyant sur un bouton !

**alibabacathy** · 28/09/2017, 22h28

Bonjour à tous !

Je fais actuellement une page et j'aimerais que quand je clique sur un bouton, les éléments voulus disparaissent, et quand je reclique de nouveau dessus, ils réapparaissent !
J'ai donc réussi a les faire disparaitre grâce à une toute petite fonction javascript !
Mais je ne sais pas comment les faire réapparaitre.
Je précise que c'est la première fois que j'utilise javascript donc je ne m'y connait pas ! J'avais prévu de faire mon site seulement en HTML/PHP mais j'ai du faire appel à du Javascript

Voici le page de test pour le bouton :

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
55
56
57
58
59
60
61
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Ton titre</title>
  </head>
  <body>
    <!-- [...] ta page HTML ici [...] -->
    <ul>
        <li id="ligne1">A<div id="ligne2">Taratata</div></li>
        <li id="ligne5">E<div id="ligne3">Teretete</div></li>
        <li id="ligne6">I<div id="ligne4">Tirititi</div></li>
        <li id="ligne52">A<div id="ligne2">Taratata</div></li>
        <li id="ligne51">A<div id="ligne4">Taratata</div></li>
        <li id="ligne50">A<div id="ligne6">Taratata</div></li>
        <li id="ligne49">A<div id="ligne7">Taratata</div></li>
        <li id="ligne48">A<div id="ligne8">Taratata</div></li>
        <li id="ligne47">A<div id="ligne9">Taratata</div></li>
        <li id="ligne46">A<div id="ligne10">Taratata</div></li>
        <li id="ligne45">A<div id="ligne11">Taratata</div></li>
        <li id="ligne44">A<div id="ligne12">Taratata</div></li>
        <li id="ligne43">A<div id="ligne13">Taratata</div></li>
        <li id="ligne42">A<div id="ligne14">Taratata</div></li>
        <li id="ligne53">A<div id="ligne15">Taratata</div></li>
        <li id="ligne41">A<div id="ligne16">Taratata</div></li>
        <li id="ligne40">A<div id="ligne17">Taratata</div></li>
        <li id="ligne39">A<div id="ligne18">Taratata</div></li>
        <li id="ligne38">A<div id="ligne19">Taratata</div></li>
        <li id="ligne37">A<div id="ligne20">Taratata</div></li>
        <li id="ligne36">A<div id="ligne21">Taratata</div></li>
        <li id="ligne35">A<div id="ligne22">Taratata</div></li>
        <li id="ligne34">A<div id="ligne23">Taratata</div></li>
        <li id="ligne33">A<div id="ligne24">Taratata</div></li>
        <li id="ligne32">A<div id="ligne25">Taratata</div></li>
        <li id="ligne31">A<div id="ligne26">Taratata</div></li>
        <li id="ligne30">A<div id="ligne27">Taratata</div></li>
        <li id="ligne29">A<div id="ligne28">Taratata</div></li>
        <li>On garde cette ligne ! </li>
 
    </ul>
    <button onclick='affichageLignes(55)' >Afficher / Masquer les lignes</button>
 
 
    <script type="text/javascript">
     
     
     
       function affichageLignes(nbrLignes) {
        var i;
        for (i = 1; i <= nbrLignes; i++) {
                
            document.getElementById("ligne"+i).style.display = 'none';
          
        }
      }
       
    </script>
 
  </body>
</html>

Merci d'avance !

**SpaceFrog** · 29/09/2017, 08h18

Il faudrait faire un minimum de recherche sur le forum, cette problématique a du déja être résolue un bon millier de fois ....

Rien que sur la première page de recherche ...

https://www.developpez.net/forums/d1...ficher+masquer
https://www.developpez.net/forums/d1...ficher+masquer
https://www.developpez.net/forums/d1...ficher+masquer

**Archimède** · 29/09/2017, 14h31

Salut, si tu fais d'autres langages de programmation, tu dois savoir faire une bascule avec un booléen non ?

ci-joint :

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
55
56
57
58
59
60
61
62
63
64
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Ton titre</title>
  </head>
  <body>
    <!-- [...] ta page HTML ici [...] -->
    <ul>
        <li id="ligne1">A<div id="ligne2">Taratata</div></li>
        <li id="ligne5">E<div id="ligne3">Teretete</div></li>
        <li id="ligne6">I<div id="ligne4">Tirititi</div></li>
        <li id="ligne52">A<div id="ligne2">Taratata</div></li>
        <li id="ligne51">A<div id="ligne4">Taratata</div></li>
        <li id="ligne50">A<div id="ligne6">Taratata</div></li>
        <li id="ligne49">A<div id="ligne7">Taratata</div></li>
        <li id="ligne48">A<div id="ligne8">Taratata</div></li>
        <li id="ligne47">A<div id="ligne9">Taratata</div></li>
        <li id="ligne46">A<div id="ligne10">Taratata</div></li>
        <li id="ligne45">A<div id="ligne11">Taratata</div></li>
        <li id="ligne44">A<div id="ligne12">Taratata</div></li>
        <li id="ligne43">A<div id="ligne13">Taratata</div></li>
        <li id="ligne42">A<div id="ligne14">Taratata</div></li>
        <li id="ligne53">A<div id="ligne15">Taratata</div></li>
        <li id="ligne41">A<div id="ligne16">Taratata</div></li>
        <li id="ligne40">A<div id="ligne17">Taratata</div></li>
        <li id="ligne39">A<div id="ligne18">Taratata</div></li>
        <li id="ligne38">A<div id="ligne19">Taratata</div></li>
        <li id="ligne37">A<div id="ligne20">Taratata</div></li>
        <li id="ligne36">A<div id="ligne21">Taratata</div></li>
        <li id="ligne35">A<div id="ligne22">Taratata</div></li>
        <li id="ligne34">A<div id="ligne23">Taratata</div></li>
        <li id="ligne33">A<div id="ligne24">Taratata</div></li>
        <li id="ligne32">A<div id="ligne25">Taratata</div></li>
        <li id="ligne31">A<div id="ligne26">Taratata</div></li>
        <li id="ligne30">A<div id="ligne27">Taratata</div></li>
        <li id="ligne29">A<div id="ligne28">Taratata</div></li>
        <li>On garde cette ligne ! </li>
 
    </ul>
    <button onclick="doClick();">Afficher / Masquer les lignes</button>
 
 
    <script type="text/javascript">
 
       var bascule=false;
 
       function affichageLignes(nbrLignes) {
        var i;
        for (i = 1; i <= nbrLignes; i++) {
        if (bascule) document.getElementById("ligne"+i).style.display = 'none'; else document.getElementById("ligne"+i).style.display ='block';
        }  
      }
      
      function doClick(){
        bascule=!bascule;
        affichageLignes(55);
      }
 
    </script>
 
  </body>
</html>