Afficher masquer du texte

**apdf1** · 27/10/2017, 18h29

Bonjour,

J'ai code pour Afficher/Masquer du texte qui fonctionne trés bien mais j'aimerai lui porter une modification.

Voici mon code Html:

Code :

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

<span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Masquer le texte</span>

Mon code Jacascript:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    function afficher_cacher(e)
{
     document.getElementById('bouton_texte').innerHTML = (document.getElementById('bouton_texte').innerHTML == "Masquer le texte")? "Afficher le texte":"Masquer le texte"; 
	var elts = document.getElementsByClassName(e);
  var nbre_elts = elts.length;
  for( var i=0; i<nbre_elts; i++)
    {
      elts[i].style.visibility = (elts[i].style.visibility=="hidden")? "visible":"hidden";
    }
}
</script>

Mon problème est que je dois cliquer sur mon texte "Afficher le texte":"Masquer le texte" pour effacer et j'aimerai que ce soit le contraire ?

Je vous remercie de votre aide.

Max

**paoli121** · 28/10/2017, 08h39

salut ! tu peux être plus claire?? j'aimerai bien t'aider.

**apdf1** · 28/10/2017, 16h28

Salut Paoli

Excuse moi de ne pas avoir répondu avant j’étais pas chez moi.

En faite mon code fonctionne je voudrais juste modifier c'est à dire que lorsque j'ouvre ma page mon texte est non afficher et pour l'afficher je clique sur le bouton masquer/afficher.
Je pense que cela doit être avec Display none mais je ne sais pas comment faire!!!!!!!

Merci d'avance

Max

**paoli121** · 28/10/2017, 21h02

Comme ceci :

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
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
                #Displayer_Text{
                        display: block;
                        width: 300px;
                        padding: 20px 0;
                        margin: 10px auto;
                        border : 1px solid #c0c2c6;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                }
                #text{display: none;}
                #bouton_etat_text{
                        display: block;
                        width: 80px;
                        padding: 10px 0;
                        margin: 10px auto;
                        background: #1b69f0;
                        color : #fff;
                        text-align: center;
                        cursor: pointer;
                }
        </style>
</head>
<body>
	<div id="Displayer_Text">
		<div id="text">Voici mon text</div>
	</div>
	<div id="bouton_etat_text">Afficher</div>
	<script>
                var btn_ = document.getElementById('bouton_etat_text'),text_ = document.getElementById("text");
                btn_.addEventListener("click",function(){
                        var etat = text_.style.display,btn_new_text = "Masquer",new_etat = "block";
                        if (typeof etat != "undefined" && etat != "none" && etat != "") {
                                new_etat = "none";
                                btn_new_text = "Afficher";
                        }
                        text_.style.display = new_etat;
                        this.innerText = btn_new_text;
                })
        </script>
</body>
</html>

**Geoffrey74** · 28/10/2017, 21h05

Salut,

ça m'a l'air d'être plus du css que du javascript.

Dans dans feuille de style, essai ça :

Code :

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

1
2
3
.texte {
visibility: hidden;
}

ou alors

Code :

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

1
2
3
.texte {
display: none;
}

visibility: hidden rend le bloc concerné invisible. Cependant, il conserve toujours son emplacement et les blocs adjacents restent à leur place
display:none retire le bloc de l'affichage courant. Son emplacement est ainsi occupé, selon les cas, par les blocs adjacents, comme si le bloc n'était pas là !

**apdf1** · 29/10/2017, 11h14

Salut Geoffrey

Je te remercie d'avoir répondu tu as raison c'est bien du Css
Avec ceci:

Code :

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

1
2
3
4
 
.texte {
visibility: hidden;
}

sa fonctionne bien, lorsque j'ouvre ma page le texte est bien effacer mais je doit cliquer plusieurs fois pour remettre le texte?

Bonne journée

Max

**Beginner.** · 29/10/2017, 15h23

C'est normal il faut que le style CSS soit "inline"... Ou bien on peut utiliser une fonction qui s'exécute après le chargement complet du DOM...

Afficher masquer du texte

JavaScript

Vue hybride

Discussions similaires

Partager

Partager