[javascript] jQuery를 사용하여 탭과 아코디언 구현하기

01 Dec 2023

javascript

소개

탭과 아코디언은 웹사이트나 앱에서 콘텐츠를 구성하고 보여주는 데 유용한 UI 패턴입니다. 이러한 패턴을 구현하기 위해 jQuery와 HTML/CSS를 사용할 수 있습니다. 이번 블로그 포스트에서는 jQuery를 사용하여 탭과 아코디언을 구현하는 방법을 예제 코드와 함께 설명하겠습니다.

탭 구현하기

탭은 여러 개의 섹션을 가지고 있으며, 탭을 클릭하면 해당 섹션의 콘텐츠가 보여집니다. 아래는 탭을 구현하는 간단한 예제 코드입니다.

$(document).ready(function() {
  // 탭 클릭 이벤트 처리
  $(".tab").click(function() {
    // 선택된 탭의 데이터 속성 값 얻기
    var tabId = $(this).data("tab-id");
    
    // 모든 탭 콘텐츠 숨기기
    $(".tab-content").hide();
    
    // 선택된 탭 콘텐츠 보여주기
    $("#" + tabId).show();
  });
});

위 코드에서는 $(".tab") 선택자를 사용하여 탭을 클릭할 수 있는 모든 요소를 선택합니다. 이 요소들에 click 이벤트를 바인딩하여 해당 탭의 데이터 속성 값을 얻고, 선택된 탭의 콘텐츠를 보여주도록 구현되어 있습니다.

아코디언 구현하기

아코디언은 여러 개의 섹션으로 구성되어 있으며, 섹션을 클릭하면 해당 섹션의 콘텐츠가 펼쳐집니다. 다른 섹션을 클릭하면 이전에 펼쳐진 섹션은 접히고 새로 선택한 섹션의 콘텐츠가 펼쳐집니다. 아래는 아코디언을 구현하는 예제 코드입니다.

$(document).ready(function() {
  // 아코디언 섹션 클릭 이벤트 처리
  $(".accordion-section").click(function() {
    // 클릭한 아코디언 섹션의 콘텐츠 요소 선택
    var content = $(this).next(".accordion-content");
    
    // 다른 아코디언 섹션 접기
    $(".accordion-content").not(content).slideUp();
    
    // 클릭한 아코디언 섹션의 콘텐츠 토글
    content.slideToggle();
  });
});

위 코드에서는 $(".accordion-section") 선택자를 사용하여 아코디언 섹션을 클릭할 수 있는 모든 요소를 선택합니다. 이 요소들에 click 이벤트를 바인딩하여 클릭한 섹션의 콘텐츠를 펼치고, 다른 섹션은 접히도록 구현되어 있습니다.

결론

jQuery를 사용하여 탭과 아코디언을 구현하는 방법에 대해 알아보았습니다. 탭과 아코디언은 웹사이트나 앱에서 콘텐츠를 구성하고 효과적으로 표시하는 데 유용한 UI 패턴입니다. 위에서 소개한 예제 코드를 바탕으로 원하는 형태의 탭과 아코디언을 구현해보세요.

소개

탭 구현하기

아코디언 구현하기

결론

참고 자료