アコーディオン機能（コンテンツ・ドロップ/折り畳みトグル）jQuery II

前に説明したjQueryコードを応用して、アイテムをクリックすると、他の項目はすべて非表示に変更されたバージョンです。 視覚効果賞に表示やすいようにslideUp（）を利用しました。

$(document).ready(function() {
jQuery(".content").hide();
//content 클래스를 가진 div를 표시/숨김(토글)
$(".heading").click(function()
{
$(".content").not($(this).next(".content").slideToggle(500)).slideUp();
});
});

• デモ

（*注： WordPressで上記のコードを使用する場合$を一括的にjQueryを変更してください。）

追加：

上記は、少し異なって id와 class 要素にシリアル番号（例えば、 menu1、menu2、menu3...）がついた場合 CSSプロパティセレクタを使用して、idとclassを指定します。

$(document).ready(function() {
$('[id^=showmenu]').click(function() {
$('[class^=menu]').not($(this).next('[class^=menu]').slideToggle("slow")).hide(); // 현재 선택한 항목 다음의 하위 항목을 제외한 모든 항목을 축소합니다.
});
});

• デモ

hide（） 代わりに slideUp（）を使用すると、良い効果を得ることができます（参照). .not メソッドの詳細については ここを参照してください。