Afficher masquer du texte

Version imprimable

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:

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

Mon code Jacascript:
Code:

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

28/10/2017, 08h39
paoli121

salut ! tu peux être plus claire?? j'aimerai bien t'aider.
28/10/2017, 16h28
apdf1

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

Comme ceci :

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

28/10/2017, 21h05
Geoffrey74
Salut,

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

Dans dans feuille de style, essai ça :
Code:

1 2 3 .texte { visibility: hidden; }
ou alors
Code:

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à !
29/10/2017, 11h14
apdf1
Salut Geoffrey

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

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
29/10/2017, 15h23
Beginner.

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...
29/10/2017, 16h06
apdf1

Bonjour Beginner

Peut tu me dire comment faire ?

Max
29/10/2017, 18h10
Beginner.

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
29/10/2017, 19h33
apdf1

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
29/10/2017, 19h49
Beginner.

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...
29/10/2017, 20h25
Beginner.

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...
29/10/2017, 20h37
apdf1

Re,

Je te remercie beaucoup sa fonctionne Nickel.

Bonne soirée et merci encore

Max