SlideToggle sur plusieurs éléments

Bonjour à tous,

J'essaye d'appliquer un slideToggle à 3 éléments. Voici le lien :

https://jsfiddle.net/franjuju/32bvnc0y/8/

Lorsque je passe du "test 1" au "test 2" puis au "test 3", l'effet est exactement ce que je veux (je veux que l'élément qui était ouvert, se ferme puis que le nouvel élément s'ouvre). Mais une fois arrivé au "test 3" et que je retourne sur le "test 1" ou le "test 2", le "test 3" ne se referme plus.

Pouvez-vous m'aider svp?
Modifié par Franjuju (10 Jul 2019 - 14:00)

Et l'eau,

on referme tout (y compris ceux qui sont fermés) et on ouvre celui qu'on veut.....

Hello,

J'ai essayé en rajoutant une class à mes contenus et en rajoutant dans ma fonction la fermeture de ces class avant l'ouverture de l'autre mais ça ne fonctionne pas...

Bonjour,

qu'est-ce que tu appelles "fermeture/ouverture d'une class(e)" ? As-tu un fiddle ou le JS+CSS de ton dernier test stp ?
Modifié par Felipe (11 Jul 2019 - 10:03)

Bonjour,

voici le jsfiddle : https://jsfiddle.net/franjuju/32bvnc0y/18/

Et lorsque je parle d'ouverture/fermeture de class c'est que lorsque je clique sur le bouton A, la zone A fait un slideToggle puis quand je clique sur le bouton B, la zoneA "annule" son slideToggle puis la zone B fait un sliddeToggle

Merci pour ton aide

J'ai corrigé ton html. Il est atteint de la divite et idite aïgue.....

html :

<div class="container">
    <nav>
        <a href="#">ouvrir test 1 +</a>
        <a href="#">ouvrir test 2 +</a>
        <a href="#">ouvrir test 3 +</a>
    </nav>
    
    <div class="content">
        <div>Test1</div>
        <div>Test2</div>
        <div>Test3</div>
    </div>
</div>

css

.container nav a{
  display:block;
  text-decoration:none;
  color:black;
}
.container .content div{
	height:20px; /*  est ce raisonnable ? */
	display: none;
	margin-bottom: 0;
  background-color: blue;
  color: white;
  cursor: pointer; /* pourquoi ? */
}

js

$('.container nav a').each(function(index){
  $(this).on('click', function(e){
    var $divs = $(this).closest('.container').find('.content div'),
        $target = $divs.eq(index);
    $divs.slideUp();  //ferme tout
    $target.slideDown(); //ouvre la cible
    e.eventDefault();
  });
});

cela me semble un peu plus claire à lire
Modifié par niuxe (11 Jul 2019 - 16:40)

Hello,

Merci beaucoup pour ton aide. C'est presque ce que je recherche mais là je n'ai plus la possibilité de fermer la div en cliquant une deuxième fois sur le lien et la transition entre le moment où la div se ferme puis le moment ou la nouvelle s'ouvre est appliqué seulement au contenu et pas à la div toute entière... Sais-tu comment je pourrais corriger cela?

https://jsfiddle.net/franjuju/32bvnc0y/23/

À vue de nez, utilisé le callback de slideup et pour ton autre problème fais un if sur l'élément ouvert.