jQuery – アコーディオンを開いたら、他のアコーディオンが閉じるようにする

複数のアコーディオンがあるとき、全部開くとすごいことになるので、１つ開いたら他のアコーディオンは閉じるようにしてほしいというご要望。

ソースは以下の通り

var parent = $('dt');
parent.each(function(){
	var self = $(this);
	self.on('click',function(){
		parent.not(self).next('dd').slideUp(300);
		self.next('dd').slideToggle(300);
	});
});

var parent = $('dt');

parent.each(function(){

var self = $(this);

self.on('click',function(){

parent.not(self).next('dd').slideUp(300);

self.next('dd').slideToggle(300);

});

dtをクリックしたら、その次のddがslideToggleするよというコードですが、クリックしてないdtの次のddは閉じるようにしてやります。

ポイントは、$(this)を変数’self’に格納して使いやすくしたうえで、‘.not(self)’で「$(this)以外」という指定をしている点。$(this)も変数に格納できるんですね！これに気づけばいろいろ捗りそう。

現場からは以上です。