Aller au contenu

Accordeon


Hugo38

Sujets conseillés

Bonjour a toutes et à tous.

Voila je suis entrain de faire une page avec une liste des préstations fournis par une entreprise, mon but et de faire un accordeon pour que l'on voie seulement les titres de chaque prestations et que lorsque l'on clique dessus le texte et les images se déroule.

J'ai reussi a le faire en suivant mes cours de Javascript mais voila j'ai un soucis, je n'arrive pas a faire le deroulement de la taille du contenu, je suis obligé de lui mettre une valeur fixe et du coup c'est assez embettant.

Voila mon code :

		var obj;
var child;
var openId = '';
var closeId = '';
var ouvrir;
var fermer;
var opacite;

function afficheContenu(id) {
if (openId == id) {
cacheContenu(openId);
openId = '';
return;
}

if (openId != '') cacheContenu(openId);

obj = document.getElementById(id);
child = obj.getElementsByTagName('div');
child[0].style.opacity = '1';
opacite = 1;

openId = id;
obj.style.height= '0px';
ouvrir = 0;
obj.style.display = 'block';
ouvrirContenu();

}

function cacheContenu(id) {
closeId = id;
fermer = 50;
fermerContenu();

}

function ouvrirContenu() {
obj = document.getElementById(openId);
obj.style.height = ouvrir+'px';

if (ouvrir < 50) setTimeout('ouvrirContenu()',1000/50);
else fadeIn();
ouvrir = ouvrir + (50/200)*(1000/50);

}

function fermerContenu() {
obj = document.getElementById(closeId);
obj.style.height = fermer+'px';

if (fermer > 0) setTimeout('fermerContenu()',1000/50);
else obj.style.display = 'none';
fermer = fermer - (50/200)*(1000/50);
}

function fadeIn() {
child = obj.getElementsByTagName('div');
child[0].style.opacity = opacite;

if (opacite < 1) setTimeout('fadeIn()', 1000/50);
opacite = opacite + (1/200)*(1000/50);
}

Les valeurs de la taille du deroulement sont : Le fermer = 50; et le if(ouvrir < 50) setTimeout .... .

Savez vous par quoi je peux remplacer ces deux valeurs pour faire en sorte que la taille du déroulement soit égale au contenue.

Merci d'avance.

Modifié par Hugo38
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...