Q&A나 FAQ(자주 묻는 지문) 처럼 제목을 누르면 내용이 펼쳐지고 다시 누르면 내용이 접히는 jQuery입니다. 단순하지만 유용하게 사용할 수 있는 코드입니다.
워드프레스를 사용하는 경우 아바다 테마나 엔폴드 테마 등에서 제공하는 아코디언/토글 기능을 사용할 수 있습니다. 엘리멘터 페이지 빌더에서도 토글과 아코디언 위젯을 제공합니다. 아바다 테마에서 FAQ/토글 엘리먼트가 표시되지 않는 경우 여기를 참고해보세요.
자바스크립트를 사용한 아코디언/토글 기능
이 글에서는 jQuery 방식을 소개했지만, jQuery는 사이트 속도에 안 좋은 영향을 미치므로 jQuery보다는 Javascript 방식을 이용하는 것이 더 좋습니다.
JavaScript로 토글/아코디언 기능을 구현하는 다양한 소스가 있습니다. W3Schools에서 제공하는 코드를 사용할 수 있습니다.
사이트 속도에 영향을 미치지 않고 싶은 경우 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);
좋은내용 감사합니다. 친절하게 설명해주셔서 이해도 쉬웠어요.
그런데 제가 해볼때 그대로 복사해도 안돼서 뭐가 문제일까 했는데 .slideToggle을 그냥 .toggle로 변경하니 작동이 되더라구요. 혹시 이유가 뭔지 알수 있으실까요?
워드프레스를 이용하는 경우 굳이 jQuery를 사용할 필요가 없이 페이지 빌더 기능을 사용하면 편리합니다.
엘리멘터 페이지 빌더 토글/아코디언: https://avada.tistory.com/2417
아바다 테마 토글/아코디언: https://avada.co.kr/%EC%95%84%EB%B0%94%EB%8B%A4-%ED%85%8C%EB%A7%88%EC%97%90%EC%84%9C-%ED%86%A0%EA%B8%80%EC%95%84%EC%BD%94%EB%94%94%EC%96%B8-%EC%87%BC%ED%8A%B8%EC%BD%94%EB%93%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/