[Résolu] Expandable en JS

Bonjour,
J'ai créé une petite fonction javascript, qui permet d'ouvrir une div quand je clique sur un lien, voici le code ci-dessous.

HTML :

<div class="expand">
<a class="caracteristiquesc" href="#">Caractéristiques</a>
<a class="photosc" href="#">Photos</a>
<a class="reservationc" title="Réservation" href="/reservation/">Réservation</a></div>
<div class="expandable">
<h3>Caractéristiques</h3>
<ul class="list">
	<li>Lit séparés (peuvent être joint)</li>
	<li>Vue 180° sur la Loire</li>
</ul>
<h3>Les photos</h3>
Photo 1, photo 2 etc...
</div>

JS :

/* 
 * Expandable
 */
$(document).ready(function(){
 $('.expandable').hide();
    $('.expand').click(function(e){
        e.preventDefault();
        var $this = $(this);
        $this.next('div').slideToggle();
    });
    });

Quand je clique sur caracteristique et photo, le javascript fonctionne nikel. Par contre, quand je clique sur le lien reservation, au lieu d'ouvrir le lien vers la page résa, c'est la div expandable qui s'ouvre comme pour caracteristique et photo.
Un peu embêtant, je ne vois pas trop comment l'isoler pour qu'il ouvre bien le lien et pas la div !
Merci pour votre précieuse aide

Bonjour.

Eh bien c'est tout simple en fait, soit tu colles une classe identique sur tes deux liens du style "expandLink" avec l'appel :

$('.expandLink').click(taFonction)

Ou alors tu précises dans ton appel toutes tes classes où l'event doit se coller :

$('.caracteristiquesc, .photosc').click(taFonction)

Ou encore tu colles l'event sur tous les liens SAUF celui de réservation :

$('.expand a:not(.reservationc)').click(taFonction)

SolidSnake a écrit :
Bonjour.

Eh bien c'est tout simple en fait, soit tu colles une classe identique sur tes deux liens du style "expandLink" avec l'appel :

$('.expandLink').click(taFonction)

Ou alors tu précises dans ton appel toutes tes classes où l'event doit se coller :

$('.caracteristiquesc, .photosc').click(taFonction)

Ou encore tu colles l'event sur tous les liens SAUF celui de réservation :

$('.expand a:not(.reservationc)').click(taFonction)

Merci, pour ces différentes propositions, c'est vrai que cela parait logique.
Mais cela ne marche pas.
J'ai testé les 3 aucunes ne marchent.
exemple :

/* 
 * Expandable
 */
$(document).ready(function(){
 $('.expandable').hide();
    $('.expand a:not(.reservationc)').click(function(e){
        e.preventDefault();
        var $this = $(this);
        $this.next('div').slideToggle();
    });
    });
    

Quand je clique sur réservation, je suis bien renvoyé sur le bon lien. Par contre, quand je clique sur Caractéristiques et Photos, rien ne se passe, l'animation ne se lance pas.

J'ai l'impression, que le js fonctionne, mais que la div expandable qui doit s'ouvrir reste en display:none ?

dreadstock a écrit :
J'ai testé les 3 aucunes ne marchent.

Houlà, c'est rude

J'ai trouvé mon erreur, sur ton code tu mettais l'event sur la div parent des liens, et donc lien expandable était après (donc la fonction next() fonctionnait.

Mais là les events sont sur les liens, donc encore deux solutions, soit tu remontes au parent avant de faire ton adjacence :

$(document).ready(function(){
 $('.expandable').hide();
    $('.expand a:not(.reservationc)').click(function(e){
        e.preventDefault();
        var $this = $(this);
        $this.parent().next('div').slideToggle();
    });
});

Soit plus simplement tu cibles expandable :

$(document).ready(function(){
 $('.expandable').hide();
    $('.expand a:not(.reservationc)').click(function(e){
        e.preventDefault();
        $('.expandable').slideToggle();
    });
});

Yeh ca marche, c'était bien ça !
Un grand merci à toi !