Discussion :

[Marie0638]

Bonjour à tous,

J'espère que je poste au bon endroit, autant vous le dire tout de suite, je suis une grande débutante mais j'ai la volonté de comprendre !

Je cherche à permettre de dérouler du contenu au clic sur une image (cette dernière représentant une catégorie d'hébergement, j'aide mon frère sur son site qui lance un camping).
Le contenu déroulé est un listing des hébergements appartenant à cette catégorie.

En fait, il me faut un fonctionnement du type FAQ (show/hide, et scroll vers le contenu au clic).

Pour l'instant, j'ai réussi les 2 premières étapes (show/hide) avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
jQuery(document).ready(function(){
 jQuery('.imagechalets').click(function() {
    jQuery('.contenuchalets').show();
    jQuery('.contenucottages').hide();
    jQuery('.contenulodges').hide();
    jQuery('.contenumobilhomes').hide();
 });
 jQuery('.imagecottages').click(function() {
    jQuery('.contenucottages').show();
    jQuery('.contenuchalets').hide();
    jQuery('.contenulodges').hide();
    jQuery('.contenumobilhomes').hide();
});
jQuery('.imagelodges').click(function() {
    jQuery('.contenulodges').show();
    jQuery('.contenuchalets').hide();
    jQuery('.contenucottages').hide();
    jQuery('.contenumobilhomes').hide();
});
jQuery('.imagemobilhomes').click(function() {
    jQuery('.contenumobilhomes').show();
    jQuery('.contenuchalets').hide();
    jQuery('.contenucottages').hide();
    jQuery('.contenulodges').hide();
});
});
</script>

Et le CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.contenuchalets,
.contenucottages,
.contenulodges,
.contenumobilhomes {
    display: none;
}
 
.imagechalets,
.imagecottages,
.imagelodges,
.imagemobilhomes {
    cursor: pointer;
}

Il me reste la fonction de scroll à mettre en place, mais j'ai beau avoir tenté plusieurs choses, aucune n'a abouti à un début de résultat... Juste pour info, le site est monté avec Wordpress et le thème Jupiter utilisant le plugin Visual Composer.

Un grand merci à ceux qui pourront me dépatouiller et éclairer ma lanterne !!

Marie

[Watilin]

Salut,

ton scénario est du type « cacher tous, montrer un seul ». Tu as moyen de réduire le volume de code de manière assez importante, et de le rendre plus facile à faire évoluer, au cas où tu voudrais rajouter un type d’hébergement par exemple.

Pour commencer, il te faut donc une instruction qui ressemble à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.hebergement').hide();

Bien entendu ça suppose que tu as rajouté une classe à chacun des hébergements.

Ensuite, il y a une astuce qui va te permettre de connaître la section à afficher en fonction du bouton qui a été cliqué. Cela te permet de n’avoir qu’une seule fonction .click(), et ainsi de n’avoir pas besoin d’en écrire une nouvelle à chaque fois que tu voudras rajouter un hébergement.

Il s’agit de récupérer l’attribut class du bouton et de repérer, à l’aide d’une expression rationnelle, la partie qui commence par image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$('.bouton').click(function () {
  $('.hebergement').hide();
 
  var match = this.className.match(/image(\w+)/);
  console.log(match);
  // ...

En supposant que tes boutons ont une classe bouton. S’ils sont tous des images dans une nav (par exemple), tu peux aussi utiliser le sélecteur $('nav img'). Tu vois l’idée.

Dans une fonction d’évènement telle que notre fonction .click(), la variable this référence automatiquement l’objet de l’évènement, en l’occurence le bouton cliqué.

Je t’ai mis un console.log pour que tu voies le résultat de match dans la console F12. Si tu n’as pas l’habitude des expressions rationnelles, ça t’aidera de pouvoir le visualiser. Le résultat est un tableau avec, en position 0, la correspondance totale (par ex. imagechalets et, en position 1, la partie capturée par les parenthèses autour de \w+ (dans l’exemple, chalets).

Il ne reste plus qu’à compléter la fonction en utilisant match[1] :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  $('.contenu' + match[1]).show();
});

Pour reprendre mon exemple, si le bouton avait pour classe imagechalets, l’expression '.contenu' + match[1] sera égale à '.contenuchalets'.

---

Pour le scroll tu as au moins deux solutions :

A. Utiliser des id et manipuler le hash de l’URL (location.hash = '#chalets', et utiliser la pseudo-classe :target. Mais, selon le navigateur, ça ne te permet pas facilement d’avoir un défilement progressif.

B. Utiliser la méthode .offset() pour récupérer la position de l’élément cible, et modifier le scrollTop du document. Pour avoir un défilement progressif, tu peux alors utiliser .animate() ( $('html').animate({ scrollTop: ... }); ).


Voilà, n’hésite pas à poser des questions