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...

**apdf1** · 29/10/2017, 16h06

Bonjour Beginner

Peut tu me dire comment faire ?

Max

**Beginner.** · 29/10/2017, 18h10

Ben je n'ai pas compris si tu as plusieurs textes ou non, apparemment oui puisque tu utilises une class...

Il suffit d'ajouter à toutes les balises textes le style inline (style= "visibility:hidden") comme ceci par exemple : <div class="texte" style= "visibility:hidden">Voici un premier texte...</div>...

Mais si tu en a beaucoup tu peux utiliser une fonction pour le faire automatiquement après le chargement du DOM...

Tu peux tester ici : http://jsbin.com/gejofugawe/edit?html,js,output

**apdf1** · 29/10/2017, 19h33

Salut Beginner,

Je te remercie sa fonctionne très bien mais tu me dit que je peut ajouter une fonction oui mais laquelle ????

Je te souhaite une bonne soirée

Max

**Beginner.** · 29/10/2017, 19h49

Oui mais ce n'est pas obligatoire, c'est à toi de voir, si tu veux ou non ajouter manuellement le style inline à toutes les balises de texte...

Si tu en a beaucoup cela peut valoir le coup de le faire automatiquement...

Dis-moi si tu veux une fonction qui fait cela automatiquement...

EDIT : La voici ici : http://jsbin.com/xarohapuyi/edit?html,js,output

Plus besoin d'ajouter le style inline à toutes les balises par contre j'ai ajouté dans le <head> le css : <style type="text/css">.texte {visibility: hidden;}</style> pour éviter que les textes s'affichent au chargement même si cela ne dure pas longtemps en temps normal...

**Beginner.** · 29/10/2017, 20h25

Finalement on peut se contenter d'une seule fonction si on la modifie un peu, regarde ici : http://jsbin.com/pekaliteka/1/edit?html,js,output

J'ai juste ajouter ceci : || elts[i].style.visibility === "" à la condition...

**apdf1** · 29/10/2017, 20h37

Re,

Je te remercie beaucoup sa fonctionne Nickel.

Bonne soirée et merci encore

Max

Afficher masquer du texte

JavaScript

Discussions similaires

Partager

Partager