11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je cherche à donner class .active à un élément cliqué et à la faire perdre aux éléments frères qui la possédaient déjà :
// Simple Accordion
$('.accordion > a').click(function() { // Action sur les liens
	if($(this).next().is(':visible')) {
		$(this).addClass('active');
	} else {
		$(this).removeClass('active');
	}
});

L'ajout d' .active positionne en css un triangle ('\25ba') vers le bas ('\25bc'). Il faut donc que le triangle puisse revenir à sa position normale ('\25ba') quand le menu est replié.

Voici un lien sur code pen : Accordion

Merci de votre aide.
Modifié par Olivier C (05 Mar 2015 - 09:25)
Hello,

.siblings() te permet de sélectionner les éléments frères filtré par un selecteur.
	$(this).siblings('.active').removeClass('active');


Bonne journée !
Tel que je le comprends, ce script fait set/reset de la classe sur l'élément sur lequel on clique.
Si tu veux aussi que tous les autres éléments soient désactivés il faut ajouter une boucle each.
Edit: Oken a proposé une façon bien plus élégante de faire la boucle en question!
Modifié par PapyJP (05 Mar 2015 - 09:57)
Oken a écrit :
.siblings() te permet de sélectionner les éléments frères filtré par un selecteur.

Génial ! Merci Oken. J'apprends vraiment plein de choses grâce à vous et à ce forum.

Le code final (sans définition de la class .active dans siblings) :
// Simple Accordion
$('.accordion > a').click(function() { // Action sur les liens
	$(this).toggleClass('active');
	$(this).siblings().removeClass('active');
});
Bonjour,

Je me permets de vous remercier également.
Je débute en jQuery et je cherchais depuis quelques jours à réaliser ce résultat sur mon bout de code.
Je n'arrivais pas à combiner correctement toggle et siblings et là je viens de comprendre mon erreur.

Merci beaucoup! Smiley smile

Bonne journée !