28234 sujets

CSS et mise en forme, CSS3

[résolu] Cacher/Afficher une zone grâce à un clic ?

Bonjour,

Je cherche à cacher/afficher une zone par un simple click (la zone est cachée par défaut, un premier click et la zone s'affiche, un deuxième et la zone se recache). Lorsque cette zone s'ouvre elle doit décaler les éléments situés en dessous.

Cette zone contiendra sans doute un overflow car elle devra être capable d'afficher éventuellement beaucoup d'informations en un espace vertical réduit, mais je ne sais pas si c'est important pour la technique à employer...

J'aimerais évidemment que tout ça soit le plus simple, efficace, et compatible possible.

Auriez-vous une technique css ou un script permettant de faire ce cache/décache de zone svp ?
Modifié par Yazerty (21 Apr 2006 - 02:26)
Salut.
Il y a un moyen mais qui allie les css et un tout petit javascript.
Si ca t'interesse il est sur cette page , il y a 2formulaires escamotables et un menu .ici
Modifié par jp94 (19 Apr 2006 - 11:04)
Ca m'a l'ai intéressant mais cela marche avec un "id", alors qu'un "class" serait nettement plus pratique dans l'application que je veux en faire. J'ai essayé de bidouiller un peu mais je n'arrive pas à passer le script en "class" Smiley ohwell ...
Je ne sais pas si tu as un interet quelquonque a utiliser les class.
tu voudrais ouvrir plusieurs cadres au meme clic ?
De mémoire, le javascript à besoin d'un id pour faire la différence entre plusieurs objets à traiter...

Donc si tu utilises une classe à la place de plusieurs id ça ne marchera pas : comment ferait-il le lien ?
En fait je voudrais utiliser ce système plusieurs fois sur une même page, c'est pour cacher les commentaires en dessous des billets d'un blog :

- un lien
sa zone cachée/visible

- un autre lien
autre zone cachée/visible
Modifié par Yazerty (19 Apr 2006 - 19:58)
Salut,

Pour ce que tu veux réaliser, il est effectivement préférable d'utiliser les id car comme le dit bob, javascript identifie les éléments d'une page à l'aide de la fonciton getElementById. Il te faut donc créer un id unique pour chaque billet, du style id_numéro du billet. Ensuite, voici une petite fonction javascript qui te permet de masquer/afficher un élément.

function openClose(id)
{
  if(document.getElementById)
    var elt = document.getElementById(id);
  else if(document.all)
    var elt = document.all[ id];
  else
    return;

  if (elt.style) {
    if (elt.style.display == 'none')
      elt.style.display = 'block';
    else
      elt.style.display = 'none';
  }
}


J'éspère que ca t'aidera Smiley cligne .
Modifié par ymhotepa (20 Apr 2006 - 00:49)
de toute maniere le script que je lui ai donné fonctionne tres bien et tu peux mettre autant d'id que tu veux sur la meme page d'ailleurs sur la page exemple il y en a 6; suffit de changer l'id1 id2 id3 id4
ici
Si tu aimes les chats ca me donne l'occasion de t'inviter a visiter cette page
ali boustan
Modifié par jp94 (20 Apr 2006 - 09:51)
Aah mais oui : ce n'est pas parce qu'on définit un id qu'on ne peut pas définir une classe (en l'occurence une classe pour le "display:none") Smiley confused ! Mon problème par rapport à l'id résidait dans le fait que je n'allais pas créer autant de style que j'avais de billets sur mon blog. La page donnée par jp94 m'avait fait pensé, à tord, qu'il fallait définir un style par id Smiley rolleyes .

Je pense utiliser le code proposé par jp94 car il est plus simple. Mais merci aussi à toi ymhotepa de m'avoir fait tilter sur cette fausse idée passagère concernant l'id/class.

Encore merci Smiley smile !
Modifié par Yazerty (21 Apr 2006 - 02:26)

function openClose(id)
{
  if(document.getElementById)
    var elt = document.getElementById(id);
  else if(document.all)
    var elt = document.all[ id];
  else
    return;

  if (elt.style) {
    if (elt.style.display == 'none')
      elt.style.display = 'block';
    else
      elt.style.display = 'none';
  }
}


Bonjour à tous,

Je suis assez (voir très) nul en Javascript Smiley murf et j'aimerais bien avoir plus de détails pour utiliser cette fonction. Dois-je créer deux <div> (un qui contient "Cliquer ici pour afficher" et un autre avec le texte) et leur donner un nom spécial ?

Sur un autre site j'avais vu ce code :
<div onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');"><a href='javascript:;'>Cliquez pour montrer/cacher la suite</a></div><div style='display:none;'>
Est-ce qu'il y a un lien avec le code précédent ?

Moi ce qu'il me faudrait dans le meilleur des cas c'est pouvoir remplacer un div complet par un autre sur un clic, mais je pense que si je savais utiliser le code de ymhotepa ça devrait marcher.

Merci d'avance pour votre aide ! Smiley cligne
Modifié par CrazyCow007 (27 May 2006 - 13:14)
Sujet clos
Aller à