jquery toggle 탭 버튼 만들기

제이쿼리 토글 탭 버튼 만들기. 아주 다양한 방식이 존재하지만... 오늘은 이렇게 만들어 봤다!

$('.btn > div').click(function(){
  const classNameIs = $(this).attr('class');

  // 클래스 이름으로 패널
  const panelSelector = '.panel' + classNameIs.charAt(0).toUpperCase() + classNameIs.slice(1); 
  
  // 선택한 패널의 토글, 형제요소 숨기기 
  $(panelSelector).toggle(0, function(){
    $(this).siblings().css("display","none");
  });
});

HTML 마크업된 부분의 이름을 가져와서 만들어주는게 포인트다.

---

결과 :

 

 

 

See the Pen jquery toggle by keepgoing-Noah (@keepgoing-noah) on CodePen.