[ 이 글은 2016년 3월 17일에 최종 수정되었습니다. ]

참고: 인기 워드프레스 테마 중 하나인 The 7이 39달러로 할인 중입니다.

앞에서 설명했던 jQuery 코드를 응용하여 항목을 누르면 다른 항목은 모두 숨겨지도록 수정한 버전입니다. 시각적인 효과상으로 보기 좋도록 slideUp()을 이용했습니다.

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

(* 참고: 워드프레스에서 위 코드를 사용할 경우 $를 일괄적으로 jQuery로 변경하시기 바랍니다.)

추가:

위와는 조금 다르게 idclass 요소에 일련번호(예: 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 메소드에 대한 정보는 여기를 참고하시기 바랍니다.

워드프레스와 관련하여 문의사항이 있나요?

워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청하실 수 있습니다.

Service Request