Pb avec Mootools

[MarvinLeRouge]

Salut,

J'ai une page avec un div, qui a une scrollbar. The div contient plusieurs "news" (un titre et un contenu). Ce que je veux faire : les titres et les contenus doivent fonctionner comme un accordéon (cette partie-là fonctionne). Problème : étant donné que le div est restreint en hauteur, j'ai besoin qu'il scroll jusqu'à la position de la news sélectionnée lorsqu'elle s'ouvre.

J'ai déjà ceci (qui marche pour l'accordéon) :

var accordion = new Accordion("h3", ".news_01_contenu", {
	opacity: false,
	onActive: function(toggler, element){
		toggler.setStyle("color", "#ff3300");
	},
	onBackground: function(toggler, element){
		toggler.setStyle("color", "#222");
	},
}, $("news_accordion"));

et ça (qui marche) pour le scroll automatique à la sélection :

var scroll = new Fx.Scroll("news_accordion", {
	wait: false,
	duration: 500,
	transition: Fx.Transitions.Quad.easeInOut
});
$$("#news_accordion h3").each (
	function (titre)
	{
		titre.addEvent("click",
			function(event)
			{
				event = new Event(event).stop();
				scroll.toElement(titre);
			});
	});

mais je n'arrive pas à les faire fonctionner ensemble : quand je clique sur un élément après celui actuellement sélectionné, ça ne scrolle pas. Dois-je scroller avant le déclenchement de l'accordéon ? Et si oui, comment réaliser ça ?

Mon code html :

<div class="news_01_all" id="news_accordion">
	<div class="news_01_wrapper">
		<h3 class="toggler">Titre de la news 1</h3>
		<div class="element news_01_contenu">
			Contenu de la news 1<br />
		</div>
	</div>
	<div class="news_01_wrapper">
		<h3 class="toggler">Titre de la news 2</h3>
		<div class="element news_01_contenu">
			Contenu de la news 2<br />
		</div>
	</div>
	<div class="news_01_wrapper">
		<h3 class="toggler">Titre de la news 3</h3>
		<div class="element news_01_contenu">
			Contenu de la news 3<br />
		</div>
	</div>
	<div class="news_01_wrapper">
		<h3 class="toggler">Titre de la news 4</h3>
		<div class="element news_01_contenu">
			Contenu de la news 4<br />
		</div>
	</div>
	<div class="news_01_wrapper">
		<h3 class="toggler">Titre de la news 5</h3>
		<div class="element news_01_contenu">
			Contenu de la news 5<br />
		</div>
	</div>
	<div class="news_01_wrapper">
		<h3 class="toggler">Titre de la news 6</h3>
		<div class="element news_01_contenu">
			Contenu de la news 6<br />
		</div>
	</div>
</div>

D'avance merci