Faire Apparaitre et disparaitre en un click

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par jiojioforever, 13 Novembre 2007.

  1. jiojioforever
    jiojioforever WRInaute occasionnel
    Inscrit:
    23 Novembre 2006
    Messages:
    474
    J'aime reçus:
    0
    Bonjour,
    je cherche un petit script fluide qui pourrait m'aider dans mon développement de site.

    Par exemple j'ai 3 parties principales :

    1 OBJET
    2 DEFINITIONS
    3 SOUSCRIPTION

    et quand l'utilisateur click sur DEFINITIONS op le 3 SOUSCRITION s'abaisse pour laisser place au contenu de DEFINITIONS

    Une méthode la plus référencable... JS ? PHP ?

    Merci d'avance
     
  2. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    tres simple :
    tu mets le contenu de souscriptions dans un div que tu nomme comme tu veux (ex : id=toto) que tu met en style : display:none
    idem pour les deux autres

    et sur clic de definitions, tu appelles un js qui met style.display:none aux deux autres et display:yes a celui là
     
  3. jiojioforever
    jiojioforever WRInaute occasionnel
    Inscrit:
    23 Novembre 2006
    Messages:
    474
    J'aime reçus:
    0
    tu as pas un lien avec un exemple :$
     
  4. biscuit
    biscuit WRInaute occasionnel
    Inscrit:
    5 Juin 2006
    Messages:
    425
    J'aime reçus:
    0
    Code:
    <script>
      function show() {
        document.getElementById('toto').style.display = 'block';
      }
    </script>
    
    <a href='javascript: show()'>Affiches-moi</a><br>
    
    <div style='display:none;' id='toto'> <!-- toto est une idée d'e-kiwi -->
    Mon Contenu caché
    </div>
    Voilà... pas testé, mais ça doit jouer...
     
  5. nexxen
    nexxen WRInaute discret
    Inscrit:
    30 Décembre 2004
    Messages:
    73
    J'aime reçus:
    0
    Et pour que l'utilisateur puisse refermer le DIV "toto":
    Code:
    function vaEtVient() /* sans jeux de mot, difficile d'éviter les anglicismes ;) */
    {
       if(document.getElementById('toto').style.display == '') 
      {
        document.getElementById('toto').style.display = 'block';
      }
      else
     {
        document.getElementById('toto').style.display = '';
     }
    }
    
    C'est un peu plus compliqué si tu veux que l'ouverture d'un sous menu provoque la fermeture de celui qui est déjà ouvert (et en terme d'ergonomie, c'est assez déstabilisant pour l'utilisateur qui ne sait plus ou il en est dans ton menu...mais ça c'est une autre histoire...)
     
  6. zim3
    zim3 WRInaute discret
    Inscrit:
    17 Mars 2007
    Messages:
    160
    J'aime reçus:
    0
    tu devrais pouvoir faire ça en 2 lignes Jquery
     
  7. jiojioforever
    jiojioforever WRInaute occasionnel
    Inscrit:
    23 Novembre 2006
    Messages:
    474
    J'aime reçus:
    0
    ok ok je vais tester ça :)
     
  8. jiojioforever
    jiojioforever WRInaute occasionnel
    Inscrit:
    23 Novembre 2006
    Messages:
    474
    J'aime reçus:
    0
    est ce que les robots google apprécient ce genre de truc ? c'est un contenu normal dans la page pour eux ou pas ?
     
  9. jiojioforever
    jiojioforever WRInaute occasionnel
    Inscrit:
    23 Novembre 2006
    Messages:
    474
    J'aime reçus:
    0
    nexxen avec ta fonction le bloc s'affiche bien mais ne disparait pas quand on reclik dessus
     
  10. biscuit
    biscuit WRInaute occasionnel
    Inscrit:
    5 Juin 2006
    Messages:
    425
    J'aime reçus:
    0
    juste oublié 2 petites nones (pour éviter les anglicismes :wink: )... et ça doit jouer
     
  11. jiojioforever
    jiojioforever WRInaute occasionnel
    Inscrit:
    23 Novembre 2006
    Messages:
    474
    J'aime reçus:
    0
    ah merci ça fonctionne :D
     
  12. nexxen
    nexxen WRInaute discret
    Inscrit:
    30 Décembre 2004
    Messages:
    73
    J'aime reçus:
    0
    :lol: effectivement c'est mieux comme ça!

    Par contre, si le menu doit être fermé par défaut, au chargement de la page, et que ce comportement soit assuré par les CSS (#toto {display: none; ...}), je crois que la propriété style.display ne sera pas renseignée (il faudrait cliqué 2 fois pour faire apparaitre le sous-menu). Pour éviter ce pb le test doit se faire sur les 2 valeurs none et '' (vide) :

    Code:
    if(document.getElementById('toto').style.display == 'none' || document.getElementById('toto').style.display == '') { ...}
     
Chargement...
Similar Threads - Apparaitre disparaitre click Forum Date
Comment apparaître dans le bloc "Rechercher des résultats sur" Techniques avancées de référencement 9 Février 2022
Ne pas faire apparaître les sous-pages dans le menu : impact sur leur référencement ? Débuter en référencement 21 Février 2021
Comment apparaitre sur Google Discover Référencement Google 20 Novembre 2019
Référencement local : comment apparaître sur une recherche Google YouTube, Google Images et Google Maps 28 Septembre 2019
Comment apparaitre dans les résultats de Facebook Facebook 22 Septembre 2018
Faire apparaître mes collections, menu dans google Débuter en référencement 13 Mai 2018
Faire apparaitre la description sur Google Débuter en référencement 4 Décembre 2016
Apparaitre dans la carte google map lors d'une recherche YouTube, Google Images et Google Maps 28 Novembre 2015
Images: comment apparaître en première page de Google? Débuter en référencement 4 Août 2015
Comment apparaître sur Google ? Débuter en référencement 3 Août 2015
Faire apparaitre une carte géographique ds le SERP Débuter en référencement 18 Mai 2015
Huffingtonpost - Apparaître dans la liste des sites web Référencement Google 21 Avril 2015
Apparaitre dans google actualités Débuter en référencement 7 Avril 2015
Faire apparaître la position moyenne Adwords sur Analytics Google Analytics 22 Janvier 2015
Comment apparaitre dans les résultats de recherche Google Débuter en référencement 30 Novembre 2014
Comment apparaître sur les Maps YouTube, Google Images et Google Maps 19 Août 2014
Comment ne pas apparaitre dans le whois? Noms de domaine et référencement 2 Août 2014
Comment faire apparaitre son site dans les pages google Débuter en référencement 15 Avril 2014
Quel délai pour voir apparaitre un site dans les SERP ? Problèmes de référencement spécifiques à vos sites 6 Mars 2014
Comment faire apparaitre les catégories de mon site dans les résultats google? Référencement Google 12 Février 2014