클릭 시 요소에 따라 동일 영역에 다른 내용 보여주기 jQuery

참고: 인기 테마인 BE 테마(33%)The 7(35%) 할인 행사를 진행하고 있습니다.
참고

예를 들어 워드프레스 무료 테마 중 하나인 Hexa는 오른쪽의 아이콘을 누르면 “메뉴”, “위젯”, “검색 상자”가 각각 상단에서 아래로 내려옵니다.
toggle hide show specific elements
다음과 같은 jQuery 스크립트로 이와 같은 효과를 얻을 수 있습니다.

$("div#head > div").hide();
$("li a").click(function () {
   $("#" + $(this).attr("class")).siblings().hide();
    $("#" + $(this).attr("class")).slideToggle(500);
});

워드프레스 유료 테마에 따라 위와 같은 효과를 자동으로 구현하도록 탑재되는 경우가 있지만, 이런 효과를 지원하지 않는다면 위의 스크립트를 응용하여 비슷하게 효과를 구현할 수 있을 것입니다. (참고: jsfiddle에서는 잘 작동하지만 실제 환경에서는 테스트하지 않았습니다.)



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.