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 et apparaitre une div


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    39
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 39
    Par défaut Faire disparaitre et apparaitre une div
    Bonjour,

    Je cherche à crée un tableau qui disparait apparait suite à un clique sur un bouton.
    Quand le tableau est masqué il ne dois plus prendre de place.

    J'ai parcourus plusieurs forums mais n'a rien trouvé de convaincant, apparemment les mauvais script que j'ai trouvé pose des problèmes d'incompatibilités de navigateurs.

    J'ai crus également comprendre que c'étais possible de le faire avec du css.
    J'aimerai aussi que le bouton change si le tableau est affiché/masqué
    (+)info -> (-)info -> (+)info.

    Si quelqu'un qui à déjà fais cela aurai la gentillesse de partagé son code, je lui en serai gré.

    Merci d'avance.

  2. #2
    Rédacteur
    Avatar de jsd03
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    1 221
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information

    Informations forums :
    Inscription : Août 2008
    Messages : 1 221
    Par défaut
    Bonjour,

    vraiment bizarre que tu n'es pas trouvé de solution sur le NET... mais bon voici comme faire :

    - donne un ID à ton tableau du genre :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <table id="monTable" >....</table>
    sur ton bouton tu ajoutes :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="button" ... onclick="cacheTable(this)" ... />
    - ajoute le code suivant dans un fichier javascript ou entre balise javascript :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function cacheTable(btn) {
     
    var tbl = document.getElementById("monTable");
     
    if(tbl.style.display != 'none') {
    tbl.style.display = 'none';
    btn.value="Afficher tableau";
    } else {
    tbl.style.display = 'block';
    btn.value="Cacher tableau";
    }
     
    }
    Google est ton ami mais ton voisin aussi

    Modérateur BI - Responsable Talend
    Mes tutoriels - FAQ Talend - FAQ SQL*Plus

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Suivez @Developpez sur twitter !

  3. #3
    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
    C'est même dans notre FAQ
    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 !

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    39
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 39
    Par défaut
    Merci beaucoup,

    SpaceFrog, je suis pas du genre à pas chercher, j'ai pas pensé à chercher dans votre faq tout simplement, pourtant c'est dans votre faq que j'ai trouvé le meilleurs tuto sur les listes déroulantes dynamique liée.

    Merci beaucoup pour ta solution, je vais l'essayer.

    Sinon pour le liens (+)info (-) info.

    Ça dois changé avec du javascript aussi car il faut que la page ne se recharge pas.
    Ne connaissant pas du tout le javascript, j'aimerai aussi qu'on me propose une solution si c'est pas trop compliqué.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    39
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 39
    Par défaut
    Je viens de voir que tu fais l'exemple avec un bouton.

    Je compte le faire avec du texte

    Bon ok pour le
    onclick="cacheTable(this)"
    Ça ne va pas posé de problèmes

    J'ai beau ne rien connaitre au javascript, que
    btn.value="Afficher tableau";
    btn.value="Cacher tableau"

    C'était pour modifié le texte du bouton au clique.
    Mais je ne peux pas mettre ce texte dans un fichier javascript, le site est en Anglais Vietnamien, et le (+)info va devenir un (+)thông tin

    En même temps il n'y à que le plus qui dois ce changer en -
    Je suppose que si je supprime les deux ligne btn.value ca ne va pas empêche le script de fonctionner.
    Il n'y à pas sinon un moyen de le faire sans le bouton?
    comme avec un span ou div plutôt

  6. #6
    Rédacteur
    Avatar de jsd03
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    1 221
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information

    Informations forums :
    Inscription : Août 2008
    Messages : 1 221
    Par défaut
    J'ai fais avec un bouton mais avec tout autre élément ça fonctionne pareil
    Google est ton ami mais ton voisin aussi

    Modérateur BI - Responsable Talend
    Mes tutoriels - FAQ Talend - FAQ SQL*Plus

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Suivez @Developpez sur twitter !

Discussions similaires

  1. [PPT-2007] Faire disparaitre des images une fois cliquées.
    Par beaukev dans le forum VBA PowerPoint
    Réponses: 2
    Dernier message: 12/12/2012, 13h44
  2. Faire disparaitre et apparaitre du texte avec du javascript
    Par edophie dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 30/03/2011, 22h09
  3. Faire apparaitre une div en fondu.
    Par thebarbarius dans le forum Général JavaScript
    Réponses: 17
    Dernier message: 04/03/2011, 10h39
  4. Faire disparaitre et apparaitre une div
    Par kopax dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 14/04/2010, 12h36
  5. Faire disparaitre et apparaitre un div simultanement ?
    Par Nooky dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 16/02/2010, 15h33

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