11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous!

j'ai cherché pas mal mais peut être que je ne sais pas trop comment formuler ma question.
J'utilise actuellement les accordeons jquery pour afficher un texte de départ,
voici l'utilisation classique :
au départ on a un titre avec un paragraphe et une mention "lire la suite" à la fin.

on clique sur LIRE LA SUITE (en bas du texte sous "titre 1")
http://img100.xooimage.com/files/6/9/0/accordeon-classique1-43e0ff3.png
l'accordeon est ouvert et on voit la suite du texte :
http://img101.xooimage.com/files/8/b/1/accordeon-classique2-43e1046.png


j'aimerais savoir si au lieu de voir simplement la suite, on pouvait modifier le contenu?
voici ce que j'aimerai que ça donne :
départ identique
http://img105.xooimage.com/files/8/b/2/accordeon-avance1-43e106c.png
on clique sur "+d'info" l'accordeon se replie et masque le texte de départ
http://img106.xooimage.com/files/4/2/9/accordeon-avance2-43e107a.png
puis il se déplie pour afficher autre chose
http://img105.xooimage.com/files/0/f/8/accordeon-avance3-43e1093.png

pensez-vous que c'est possible?
ou pouvez vous m'indiquer ou trouver la réponse?
je ne savais pas trop quel mot clé utiliser j'en ai essayé plein mais je n'ai pas trouvé

je vous remercie!
Modifié par pimperenelle (12 Feb 2014 - 14:36)
Salut,
hop un petit fiddle pour montrer que ça marche : http://jsfiddle.net/w3D4Z/1/

En gros le principe ça va être que quand tu cliques sur ton résumé, tu vas le cacher, du coup lui faire un slideUp, et une fois qu'il est caché on fait faire un slideDown pour afficher le contenu complet.


Pour le code javascript je suis rester generique, j'ai fais directement sur le clique du paragraphe qui a une classe Resume, je ne suis pas aller jusqu’à gérer le clique sur lire la suite, je te laisse te débrouiller pour les détails qui colle pile a ton cas Smiley smile

$(".Resume").click(function() {
$(this).slideUp( "slow", function() {
// Ici on attend que le slow soit fini pour executer le down du suivant
$(this).next().slideDown( "slow", function() {
// Si on veut faire d'autre action quand le down est fini
});
});
});

Modifié par mathieu1004 (12 Feb 2014 - 15:21)