Show / Hide en javascript pour un tableau

[soundtraker]

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

[dmathieu]

j'ai fait ca dernierement.
voici comment j'ai procédé :

Code: Tout sélectionner

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: Tout sélectionner

<input type="submit" onclick="javascript:hide('mondiv');" value="Bouton B" />

Code: Tout sélectionner

<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: Tout sélectionner

.hidden {
   display: none;
}

.visible {
   display: inline;
}

[soundtraker]

T'es trop fort! Ca fonctionne. T'es peux être l'ennemi de fredon mais ca va j't'en veux plus maintenant!

[dmathieu]

hum dans mon avatar, c'est gandalf hein, je ne suis pas l'ennemi de frodon, bien au contraire.

[soundtraker]

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!

[Pierrot25]

Code: Tout sélectionner

.hidden {
   display: none;
}

.visible {
   display: inline;
}

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 ?

[ti_ouf]

bonjour
j'aimerais également connaitre la réponse de cette derniere question.

[Pierrot25]

bonjour
j'aimerais également connaitre la réponse de cette derniere question.

Ouais, pareil

[e-kiwi]

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

[soundtraker]

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

[Pierrot25]

mêmes constatations sur mon site...
Comme quoi GG ne cherche pas qu'à nous mettre des bâtons dans les roues...

[zehwany]

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 ?

[jeannole]

Bonsoir, il y a encore plus simple selon moi :

Dans le header :

Code: Tout sélectionner

<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: Tout sélectionner

<input type="button" value="Cliquez ici !!!" Onclick="affiche('cache');" />


Code pour l'objet à afficher/cacher :

Code: Tout sélectionner

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

[UsagiYojimbo]

Il y aurait encore plus élégant, ce serait en utilisant un framework JS du type jQuery.

[jeannole]

Possible, le JQuery ne fait pas partie de mes connaissances.