아코디언 기능(컨텐츠 펼침/접힘 토글) - 자바스크립트/jQuery

Q&A나 FAQ(자주 묻는 지문) 처럼 제목을 누르면 내용이 펼쳐지고 다시 누르면 내용이 접히는 jQuery입니다. 단순하지만 유용하게 사용할 수 있는 코드입니다.

워드프레스를 사용하는 경우 아바다 테마나 엔폴드 테마 등에서 제공하는 아코디언/토글 기능을 사용할 수 있습니다. 엘리멘터 페이지 빌더에서도 토글과 아코디언 위젯을 제공합니다. 아바다 테마에서 FAQ/토글 엘리먼트가 표시되지 않는 경우 여기를 참고해보세요.

자바스크립트를 사용한 아코디언/토글 기능

이 글에서는 jQuery 방식을 소개했지만, jQuery는 사이트 속도에 안 좋은 영향을 미치므로 jQuery보다는 Javascript 방식을 이용하는 것이 더 좋습니다.

JavaScript로 토글/아코디언 기능을 구현하는 다양한 소스가 있습니다. W3Schools에서 제공하는 코드를 사용할 수 있습니다.

사이트 속도에 영향을 미치지 않고 싶은 경우 HTML/CSS로 아코디언/토글 기능을 구현하는 것도 가능합니다.

• HTML/CSS로 작동하는 아코디언 메뉴

아코디언 기능(컨텐츠 펼침/접힘 토글) jQuery

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

• 데모

워드프레스에서 위 코드를 사용할 경우 다음과 같은 형식으로 추가하시기 바랍니다.

jQuery(document).ready(function($) {
 // 코드
})

또는

(function($) {

    $(document).ready(function() {

        // 코드

    });

})(jQuery);

참고:

• 워드프레스 FAQ 플러그인