18041 sujets

Questions générales et questions de débutants

Drupal 7 - Module plier/déplier une div indépendemment.. .

Bonjour tout le monde,

Toujours à fond de Kiwis ? Smiley lol

J'ai un petit problème sur un futur site pour une association.. . Je cherche à faire un système de lecture avec des petites puces qui permettent de déplier et/ou plier le contenu pour l'afficher..

Sous drupal 7, j'ai vu le module accordeon qui utilise JQuery. .. mais lorsque je clique sur un onglet, l'autre disparait, ce système ne m'intéresse pas et je ne sais pas si je peux cocher/décocher une option pour rendre indépendant chaque div. Quelqu'un peut me donner un avis ?

Il y aussi QuikcTabs, qui a l'air de faire pareil. ..

Est-ce que vous connaissez un moyen simple et efficace pour faire de plié/déplié sur des div ?

upload/48809-ModuleFonc.jpg
Bonjour,

Pas besoin d'un "module" pour cela, un simple bout de code suffit.

Solution avec jQuery :
(function($) {
  var spoiler = $('.spoiler'); // cache le contenu du spoiler par défaut
  spoiler.next().slideUp();
  spoiler.click(function(e){
    $(this).next().toggle();
    e.preventDefault();
  });
})(jQuery);

Exemple en ligne : Spoiler
Merci de ce bout de code ! Smiley cligne

Je vais mettre ça dans mes pages pour me simplifier la vie. .

En postant ce sujet, je cherche à la base un module parce que le site est destinée à une association, les futurs personnes qui se chargeront des mises à jours du site ne sont pas du tout dans le web, plutôt dans les livres.. . Smiley smile

Malheureusement je ne connais rien de concret en PHP ou JavaScript pour faire un module par moi-même, un jour je l'espère. .. Avec ton bout de code en fonction et le reste autour. .. Smiley murf
J'ai essayé de mettre ton morceau de code en place, ça ne marche pas, je ne sais pourquoi. Le Css est reconnu, le JavaScript aussi mais rien n'opère.. . Pourtant le script est simple. .

.spoiler + * {
  display: none;
}


Je n'ai pas l'impression que cela fonctionne ou que c'est reconnu ..
Bonjour,

As-tu des erreurs javascript sur ta page ?
Juste je rajouterai un stop() au script d'Olivier avant l'animation, pour éviter le yoyo lors de clics frénétiques :
$(this).next().stop().toggle(800);
Si tu mets des alert() dans ton code, il apparaissent bien ?
(function($) {
  alert("Lancement du code spoiler")
  var spoiler = $('.spoiler'); // cache le contenu du spoiler par défaut
  spoiler.next().slideUp();
  spoiler.click(function(e){
    alert("Clic sur un lien spoiler")
    $(this).next().stop().toggle();
    e.preventDefault();
  });
})(jQuery);
J'ai la première alerte de lancement "Lancement du code spoiler", par contre le reste ça n'a pas l'air de fonctionner, les éléments qui suivent 
.spoiler
reste dépliés. J'ai cliqué dessus, rien, pas de réaction, pas d'apparition du message de l'alert. .
Je viens d'essayer avec firebug et lorsque j'ai modifié les ' par des ", la première partie c'est pliée mais pas la deuxième. Là j'ai pu cliqué pour plié déplier le premier élément à volonté. Smiley murf

Par contre si je relance (Ctrl+R) la page, ça ne marche plus de nouveau sauf si j'efface un " pour en remettre un ?? Smiley biggol

Je ne comprends pas trop le conflit, quelqu'un peut-être m'éclairer pourquoi ça fait ça ?
Quelqu'un pourrait m'orienter vers une solution ? Smiley smile

Je ne comprends pas pourquoi le code ne marche pas du premier coup. . mais marche lorsque je l'édite sans rien changer avec firebug . . Smiley ohwell

Sur internet, j'ai trouvé un site avec par chance un code qui refait la même chose, lui ne bug pas, mais je ne le comprends vraiment.
Modifié par blond1n (21 Mar 2016 - 18:41)
Me revoila ! Smiley langue

J'ai pu revenir sur mon problème. .. J'ai réussi à employer le code d'Olivier C. Merci à toi d'ailleurs ! Smiley cligne

Je l'ai modifié comme ça : 
jQuery(document).ready(function($) {
  var spoiler = $('.toggler'); // cache le contenu du spoiler par défaut
  spoiler.next().hide();
  spoiler.click(function(e){
    $(this).next().slideToggle(500);
    e.preventDefault();
  });
});


(function($) { : devient : jQuery(document).ready(function($) {
et plus de : })(jQuery); : à la fin du code

J'ai du mettre un slide.Toggle(); à la place du .toggle(); parce que mes éléments apparaissait pas la gauche, je ne sais pas pourquoi. J'avais déjà eu ce genre de problème sans jamais comprendre. Smiley ohwell

SolidSnake tu m'as dis de rajouter un .stop() pour éviter de voir défiler "le yoyo lors de clics frénétiques". Le hiatus c'est que lorsque je clic en milieu d’ouverture ou fermeture, cette hauteur est conservée pour la prochaine yoyoterie.. . Et je me retrouve avec une ouverture quasi nul si j'ai cliqué rapidement deux fois sur la zone. Smiley biggol
Modifié par blond1n (15 Apr 2016 - 13:00)
Me revoilà avec un problème. ..

lorsque ma zone est vide, avec juste la mention "en construction", l'ouverture de la div va plus bas que la hauteur de la div et revient avec une espèce de sursaut pas très esthétique, inutile qui plus est.

Est-ce que je dois rajouter quelque chose au .js ?
Sujet clos
Aller à