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