Show / Hide en javascript pour un tableau

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par soundtraker, 17 Octobre 2005.

  1. soundtraker
    soundtraker WRInaute discret
    Inscrit:
    20 Septembre 2005
    Messages:
    57
    J'aime reçus:
    0
    Slt,

    J'ai beau chercher sur la toile, j'ai du mal à trouver un code javascript ou autre qui me permet d'afficher et cacher un tableau dès qu'on clique quelque part.

    J'aimerai faire un bouton "Voir les commentaires" et onclick les afficher juste en dessous du bouton en fait...

    Quelqu'un à une solution??
     
  2. dmathieu
    dmathieu WRInaute accro
    Inscrit:
    9 Janvier 2004
    Messages:
    6 083
    J'aime reçus:
    0
    j'ai fait ca dernierement.
    voici comment j'ai procédé :

    Code:
    function hide(identifiant) {
    		if (document.getElementById(identifiant).className == "hidden") {
    			document.getElementById(identifiant).className = "visible";
    		} else {
    			document.getElementById(identifiant).className = "hidden";
    		}
    	}
    la fonction te permet d'afficher, ou de masquer le <div> dont l'id est équivalent à l'argument appellé dans la fonction.

    ex :
    Code:
    <input type="submit" onclick="javascript:hide('mondiv');" value="Bouton B" />
    Code:
    <div id="mondiv" class="hidden" ><input type="submit" value="Bouton A" />
    il suffit de le modifier un peu (je vai te laisser chercher un peu quand meme, pour que tu comprenne) pour masquer le bouton B a l'appel de la fonction.

    nb : tu appelle dans la fonction des class css, qui affichent ou masquent ton div.

    Code:
    .hidden {
    	display: none;
    }
    
    .visible {
    	display: inline;
    }
     
  3. soundtraker
    soundtraker WRInaute discret
    Inscrit:
    20 Septembre 2005
    Messages:
    57
    J'aime reçus:
    0
    T'es trop fort! Ca fonctionne. T'es peux être l'ennemi de fredon mais ca va j't'en veux plus maintenant!
     
  4. dmathieu
    dmathieu WRInaute accro
    Inscrit:
    9 Janvier 2004
    Messages:
    6 083
    J'aime reçus:
    0
    hum dans mon avatar, c'est gandalf hein, je ne suis pas l'ennemi de frodon, bien au contraire.
     
  5. soundtraker
    soundtraker WRInaute discret
    Inscrit:
    20 Septembre 2005
    Messages:
    57
    J'aime reçus:
    0
    oh un vrai gentil! J'avais pas remarqué qu'il avait une tete de méchant Gandalf! Mais bon j'ai vu que le dernier! me demande pas pkoi c'est illogique je sais!
     
  6. Pierrot25
    Pierrot25 WRInaute occasionnel
    Inscrit:
    17 Mars 2005
    Messages:
    403
    J'aime reçus:
    0
    je croyais que les moteurs de recherche n'aimaient pas le texte caché par un display:none en css et du javascript. Moi j'uilise ca aussi sur mon site. C'est bien utile je trouve mais est ce que ca pose vraiment des problèmes pour le référencement ? la page risque pas d'être blacklistée ?
     
  7. ti_ouf
    ti_ouf WRInaute discret
    Inscrit:
    10 Avril 2005
    Messages:
    185
    J'aime reçus:
    0
    bonjour
    j'aimerais également connaitre la réponse de cette derniere question.
     
  8. Pierrot25
    Pierrot25 WRInaute occasionnel
    Inscrit:
    17 Mars 2005
    Messages:
    403
    J'aime reçus:
    0
    Ouais, pareil :D
     
  9. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 855
    J'aime reçus:
    1
    >> je croyais que les moteurs de recherche n'aimaient pas le texte caché par un display:none en css

    non, ce sont les webmasters qui n aiment pas que d'autres utilisent cette technique pour cacher du texte aux visiteurs lol
     
  10. soundtraker
    soundtraker WRInaute discret
    Inscrit:
    20 Septembre 2005
    Messages:
    57
    J'aime reçus:
    0
    écoutez, après avoir installé ce système sur pratiquement toutes les pages de mon site, je n'ai remarqué aucun effet néfaste! Google passe comme avant et indexe même certains contenu caché! (Je m'en sers pour afficher masquer les commentaires et c'est nickel!)
     
  11. Pierrot25
    Pierrot25 WRInaute occasionnel
    Inscrit:
    17 Mars 2005
    Messages:
    403
    J'aime reçus:
    0
    mêmes constatations sur mon site...
    Comme quoi GG ne cherche pas qu'à nous mettre des bâtons dans les roues...
     
  12. zehwany
    zehwany Nouveau WRInaute
    Inscrit:
    2 Mars 2008
    Messages:
    16
    J'aime reçus:
    0
    c'est toujours d'actualité ou non ?

    moi j'ai un doute !! j'utilise ce code JavaScript pour cacher du texte sur une page, il s'agit d'un bloc de 5 liens, le texte est complètement caché aux visiteurs, mais on le voit dans le code source et en analysant la page avec lynx :

    $(document).ready(function () {
    // prettyBox
    $("a[rel^='prettyPhoto']").prettyPhoto({theme: 'light_rounded'});
    //Pour cacher une liste
    $('span.prettyListe').hide();
    // scroll jQuery Horizontal
    $(function() {
    //var originalSizes = new Array();
    // this initialises the demo scollpanes on the page.
    $('#pane1').jScrollHorizontalPane({scrollbarHeight:21, showArrows:true, arrowSize:21, wheelSpeed:200});
    });
    // remplacement img
    $(function() {
    $("#scrollPane img").hover(function() {
    $(this).attr("src", $(this).attr("src").split(".").join("-hover."));
    }, function() {
    $(this).attr("src", $(this).attr("src").split("-hover.").join("."));
    });
    });
    });

    qu'en pensez vous ? cela pourrait-il nuire à mon référencement ?
     
  13. jeannole
    jeannole Nouveau WRInaute
    Inscrit:
    10 Janvier 2011
    Messages:
    2
    J'aime reçus:
    0
    Bonsoir, il y a encore plus simple selon moi :

    Dans le header :
    Code:
    <script type="text/JavaScript">
    	function affiche_cache() {
          		if (document.getElementById('cache').style.visibility == "hidden") {
             		document.getElementById(identificateur).style.visibility = "visible";
          		} else {
             		document.getElementById(identificateur).style.visibility = "hidden";
          		}
    	}
    </script>
    
    Ce code pareil au premier proposé avec quelques changements.

    Puis dans la page html ou php :

    Code pour le bouton :
    Code:
    <input type="button" value="Cliquez ici !!!" Onclick="affiche('cache');" />
    
    Code pour l'objet à afficher/cacher :
    Code:
    <span id="cache" style="visibility: hidden;">Coucou</span>
    Bien sûr il est possible de mettre à la place du span des liens (a), div, tableaux, ...

    Cette façon de coder permet d'économiser... quelques octets.
    [​IMG]
     
  14. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 114
    J'aime reçus:
    64
    Il y aurait encore plus élégant, ce serait en utilisant un framework JS du type jQuery.
     
  15. jeannole
    jeannole Nouveau WRInaute
    Inscrit:
    10 Janvier 2011
    Messages:
    2
    J'aime reçus:
    0
    Possible, le JQuery ne fait pas partie de mes connaissances.
     
Chargement...
Similar Threads - Show Hide javascript Forum Date
Contenu compris dans balise "Show more" est-il référencé ? Débuter en référencement 30 Octobre 2015
Requetes SQL parfois lente : Selon show profile -> Pb opening table Développement d'un site Web ou d'une appli mobile 8 Juillet 2015
WordPress, Plugin Nexgen Gallery et Problème de bordure en CSS avec le Slideshow de NG Développement d'un site Web ou d'une appli mobile 9 Septembre 2014
slide show jquery avec effet de fondu Développement d'un site Web ou d'une appli mobile 13 Août 2013
slideshow Développement d'un site Web ou d'une appli mobile 27 Janvier 2012
Problème avec url du type /showthread.php?t=999 URL Rewriting et .htaccess 9 Février 2011
YouTube Shows : la TV en mode replay par streaming YouTube, Google Images et Google Maps 5 Octobre 2010
Slideshow avec boutons liens Développement d'un site Web ou d'une appli mobile 3 Septembre 2010
Slideshow Flash et indexation d'images Débuter en référencement 29 Juillet 2010
Slide show et référencement Rédaction web et référencement 20 Avril 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice