Script Toggle spécifique

  • Créateur du sujet Créateur du sujet Membre supprimé 2
  • Date de début Date de début
M

Membre supprimé 2

Invité
Bonjour,

J'utilise habituellement ce script pour faire un toggle, mais je recherche quelque chose de plus élaboré, comme les menus des boites arrondies de la barre latérale gauche du site Linked IN, à savoir: lorsqu'on toggle en cliquant sur l'image +, le - s'affiche automatiquement. Avez vous une idée ?
D'avance un merci a Gloup Gloup, Tatouille et P4blo qui liront sans doute ce sujet, vous êtes mes maitres en développement :)
 
Dernière édition par un modérateur:
Bonjour,

J'utilise habituellement ce script pour faire un toggle, mais je recherche quelque chose de plus élaboré, comme les menus des boites arrondies de la barre latérale gauche du site Linked IN, à savoir: lorsqu'on toggle en cliquant sur l'image +, le - s'affiche automatiquement. Avez vous une idée ?

Il faut s'inscrire sur ton site, alors je ne sais pas à quoi ressemble ce menu mais il y a un tuto sur le site d'alsacreations, ça pourrait peut-être te servir. ;)


(…) Gloup Gloup(…)vous êtes mes maitres en développement :)

:eek::eek::eek: J'ai failli avaler mon paquet de frites de travers!!! Moi? Un maître en développement? :eek::D
 
Dernière édition par un modérateur:
Bonjour,

J'utilise habituellement ce script pour faire un toggle, mais je recherche quelque chose de plus élaboré, comme les menus des boites arrondies de la barre latérale gauche du site Linked IN, à savoir: lorsqu'on toggle en cliquant sur l'image +, le - s'affiche automatiquement. Avez vous une idée ?
D'avance un merci a Gloup Gloup, Tatouille et P4blo qui liront sans doute ce sujet, vous êtes mes maitres en développement :)

J'avais rien à avaler de travers mais bon... J'ai à peine fini ma première année de fac moi alors au moins pour quelques années encore je suis et reste un padawan :cool:

Tu sais c'est pas très compliqué, il suffit de faire deux changements à la fois, un de style pour afficher/cacher, et un de l'attribut src d'une image :)

Bon, on va dire que t'as les fichiers d'images "plusse.png" et "mouain.png" :p

html:
Bloc de code:
<img src="plusse.png" alt="Display / Hide" id="toggleButton1" />
<a href="javascript:toggle_msg(1);">Display / Hide</a> 
<ul id="msg1" style="display:none;">
  <li>Sous élément 1</li>
  <li>Sous élément 2</li>
  <li>Sous élément 3</li>
  <li>Sous élément 4</li>
</ul>

js:
Bloc de code:
togglePlus = new Image(); togglePlus.src = 'plusse.png';
toggleMinus = new Image(); toggleMinus.src = 'mouain.png';

function toggle_msg(n)
{
  if (document.getElementById('msg'+n).style.display == 'none') {
    document.getElementById('msg'+n).style.display = 'block';
    document.getElementById('toggleButton'+n).src = toggleMinus.src;
  } else {
    document.getElementById('msg'+n).style.display = 'none';
    document.getElementById('toggleButton'+n).src = togglePlus.src;
  }
}
J'ai pas testé mais ça devrait fonctionner :)


PS: il y a une fermeture de div en trop dans ta page d'exemple.
 
Dernière édition par un modérateur:

Mais c'est encore mieux que ce que j'ésperais. :up:
Quand je te dis que tu es un maitre. :siffle:



je suis et reste un padawan

Oui mais un padawan, ca devient Jedi :rateau:
Non mais sérieux tu as toujours réponse à tout, c'est incroyable :D


Ton code fonctionne nikel, félicitations. :)

Seul petit hic, le plusse et le mouain ne restent pas en place quand le script s'active. J'ai essayé d'adapter un peu de CSS pour y remédier, sans succès pour l'instant.

Merci beaucoup en tous cas.
 
Dernière édition par un modérateur:
Mais c'est encore mieux que ce que j'ésperais. :up:
Quand je te dis que tu es un maitre. :siffle:





Oui mais un padawan, ca devient Jedi :rateau:
Non mais sérieux tu as toujours réponse à tout, c'est incroyable :D


Ton code fonctionne nikel, félicitations. :)

Seul petit hic, le plusse et le mouain ne restent pas en place quand le script s'active. J'ai essayé d'adapter un peu de CSS pour y remédier, sans succès pour l'instant.

Merci beaucoup en tous cas.
Le plus qui bouge c'est parce que ton "+" fait 20*20 px alors que ton "-" fait 9*9 px ;) Retaille les bien et tout devrait fonctionner parfaitement :)
 
Dernière édition par un modérateur: