Accordion dans le corps de la page

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by drswit on

Bonjour,

je découvre Drupal, je suis donc une buse.

J'ai regardé tout plein d'articles et tout, mais j'y comprends rien.

Je souhaite tout simplement, dans une page donnée (celle-ci en l'occurrence : http://www.assurplus.ch/drupal6/?q=node/55) faire en sorte que du contenu soit caché (accordéon quoi) puis affiché lorsqu'on clique sur un de liens bleus à gauche.

Le principe est tout bête (comme existant actuellement en javascript ici : http://www.assurplus.ch/assmal.html) mais entre Views, auquel je comprends QUEUDALLE et autres plugins, je m'en sors pas...

Quelqu'un pourrait-il m'aider ou me suggérer un tuto détaillé ?

Merci d'avance :)

Pascal.

Forum : 
Support général
Version de Drupal : 
6.x
Tags : 
accordion accordéon

Soumis par drswit le 15 Mars, 2011 - 14:59

Merci de ton aide. Cependant il ne s'agit pas pour moi de développer ou afficher/cacher un menu mais simplement des liens. Les bleus dont je parlais sont ceux se trouvant sous "available services" sur cette page : http://www.assurplus.ch/drupal6/?q=node/55

Pas de menu donc, juste afficher un calque caché sur la droite (en-dessous de "quality standards") lorsqu'on clique sur un des liens.

Tu vois ce dont je veux parler ?

Pascal.

Soumis par vincent59 le 16 Mars, 2011 - 09:43

OK, c'est plus clair.

Dans ce cas, je ne sais pas si un module est nécessaire. Un peu de javascript / jQuery, du style :

$(document).ready(function() {

$(".column-left h4").click(function () {
       $(".column-left ul").toggle('fast',function(){
});

devrait faire l'affaire. Il faudrait voir s'il y a déjà un javascript avec document.ready (le jQuery standard) quelque part dans le theme, et ajouter les 3 lignes

Soumis par drswit le 16 Mars, 2011 - 12:53

Merci pour ta réponse :)

Mais oula, alors je veux pas faire le boulet, mais si j'ai bien compris, le code que tu m'indiques est à mettre direct dans le corps de la page ou ailleurs ?

Quant à jQuery tu parles du module ? Si oui, je ne l'ai pas (j'utilise la version 6.2), pas ajouté. Dois-je le faire ?

Enfin, au niveau html, je dois mettre quoi pour appeler l’exécution du bidule ?

Ci-dessous un quote du code de la page en question :

<div class="columns">
        <div class="column-left">
            <h4>Available Services</h4>
            <ul>
                <li><a href="#">Eret laoreet aliquam leo. Telluser</a></li>
                <li><a href="#">Dolor, ibus enean auctor wis</a></li>

Soumis par vincent59 le 16 Mars, 2011 - 14:19

J'ai regardé le code HTML de ton site, et il y a bien un appel à la librairie jquery.js.

Il ne faut rien changer au code html normalement, le test que j'ai fait se base sur le code HTML de ta page.

Le souci, c'est d'identifier où se fait l'appel à la fonction jQuery document.ready ? est-ce dans le page.tpl.php ou ailleurs, là je ne peux rien dire.

Soumis par vincent59 le 16 Mars, 2011 - 16:04

Hé bien c'est parfait, c'est bien dans le page.tpl.php que l'on trouve le jquery, ligne 13 :

<script type="text/javascript">
        $(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 7000, true);
        });
    </script>

C'est dans cette partie qu'il faut ajouter les lignes pour que cela devienne :

<script type="text/javascript">
        $(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 7000, true);

     $(".column-left h4").click(function () {
       $(".column-left ul").toggle('fast',function(){
     });

});
    </script>

Soumis par drswit le 16 Mars, 2011 - 17:31

Super, meursssi !!!

Alors j'ai rajouté le code que tu m'as fourni dans page.tpl.php

Par contre maintenant je bute sur l'appel à faire pour afficher les calques.

Donc le but est toujours lorsqu'on clique sur un lien de "column-left" (actuellement Available Services) que s'affiche le texte correspondant dans "colum-right" (actuellement Quality Standards).

Exemple : en cliquant sur le premier lien "Eret laoreet aliquam leo. Telluser" que s'affiche mon blabla en lieu et place du texte dans Quality Standards.

Et là je ne sais comment et quoi rajouter dans le HTML. Pourrais-tu m'indiquer la marche à suivre ?

Merci beaucoup !

:)

Soumis par vincent59 le 17 Mars, 2011 - 14:43

Le souci c'est que par rapport à l'existant, on va dire que "l'architecture" change : sur l'existant, le corps des articles est contenu dans la page, et le fait de cliquer sur le lien / titre rend visible le contenu dans le block de droite.

Dans la version Drupal, si chaque lien pointe vers un contenu, il faudrait récupérer le contenu et l'afficher. Même si c'est sans doute faisable, je n'ai pas trop le temps de regarder cela en ce moment. A priori, ça devrait recharger la page avec le nouveau contenu... Ou alors il faut n'avoir qu'une seule page de contenu, avec les liens et refaire ce qui existe maintenant