IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Nouveau candidat au Club
    Femme Profil pro
    �tudiant
    Inscrit en
    Septembre 2017
    Messages
    1
    D�tails du profil
    Informations personnelles :
    Sexe : Femme
    �ge : 45
    Localisation : France, Bouches du Rh�ne (Provence Alpes C�te d'Azur)

    Informations professionnelles :
    Activit� : �tudiant

    Informations forums :
    Inscription : Septembre 2017
    Messages : 1
    Par d�faut Faire disparaitre/r�apparaitre du texte en appuyant sur un bouton !
    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 !

  2. #2
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par d�faut
    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
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  3. #3
    Membre Expert
    Avatar de Archim�de
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 60
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par d�faut
    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>

    bonne journ�e

  4. #4
    Mod�rateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Is�re (Rh�ne Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par d�faut
    Bonjour,
    <li id="ligne1">A<div id="ligne2">Taratata</div></li>
    la structure et l'usage abusif des � id � ne sont pas des plus heureux !

Discussions similaires

  1. Faire disparaitre zones de texte en trop
    Par Benjycool dans le forum VBA Access
    R�ponses: 18
    Dernier message: 07/08/2008, 17h12
  2. ne pas faire disparaitre un div lorsque je suis sur un de ces enfants.
    Par elekis dans le forum G�n�ral JavaScript
    R�ponses: 14
    Dernier message: 17/07/2008, 06h49
  3. Faire la diff�rence entre texte et photos sur une image
    Par NiuAge dans le forum Traitement d'images
    R�ponses: 12
    Dernier message: 23/02/2007, 23h45
  4. R�ponses: 13
    Dernier message: 07/08/2006, 10h13
  5. Faire appara�tre un champ texte en cliquant sur un select
    Par yoyot dans le forum G�n�ral JavaScript
    R�ponses: 2
    Dernier message: 15/03/2005, 16h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo