[jQuery] 탭 접었다 펼치는 아코디언

#1. 접었다 펼쳐지는 아코디언 형식

See the Pen 아코디언 by limhaneul2244 (@limhaneul2244) on CodePen.

 

$(document).ready(function(){
  $('.accodionList ul').hide();
  
  $('.accodionList .subOpen').click(function(){
    if( $(this).hasClass('active') ){      //3-0
      $(this).parent().next().slideUp();   //3-1
      $(this).removeClass('active');       //3-2
    } else {                                                              //4-0
      $('.accodionList').find('.active').parent().next().slideUp('slow'); //4-1
      $('.accodionList').find('.active').removeClass('active');            //4-2 (find로 찾을때는 class로 찾아준다)
      $(this).parent().next().slideDown('slow');                          //4-3
      $(this).addClass('active');                                         //4-4
    }
  });
});

1. ul을 모두 숨겨준다.

2. .subOpen을 클릭했을 때 내부 구문 실행

 

if문

3-0. 만약 .subOpen 에 active가 있다면

3-1. .subOpen의 부모(.menu)의 다음 ul을 slideUp시킨다.

3-2. .subOpen에 있는 active를 없앤다.

 

else문

4-0. 만약 .subOpen 에 active가 없다면

4-1. .accodionList에서 active를 찾아서 부모의 다음 자식 (여기서는 subOpen에 active가 붙기 때문에 결국은 ul)

을 접어준다. 

4-2. .accodionList에서 active를 없앤다.

왜냐하면 열려있는 ul을 닫아줘야 하기 때문에 4-1과 4-2에서 탭을 닫아준다.

4-3. .subOpen의 부모(.menu)의 다음 ul을 slideDown시킨다.

4-4. .subOpen에 있는 active를 추가한다.

이부분에서 새로 탭을 열어준다.

 

 

기본 구성

두번째 탭을 눌렀을 경우 .subOpen에 active라는 클래스가 붙으며 ul이 slideDown된다.

#2. 클릭한 요소 클릭시 하위 메뉴만 펼쳐지는 형식

See the Pen 클릭한 요소 클릭시 하위 메뉴만 펼쳐지는 아코디언 by limhaneul2244 (@limhaneul2244) on CodePen.

 

jQuery

$(document).ready(function(){
  $('.answerBox').hide();
    $('.faqWrapper .faqItem').click (function(){
    if($(this).hasClass('active')) {
      $(this).children('.arrow').removeClass('fa-angle-down').addClass('fa-angle-up');
      $(this).removeClass("active");
      $(this).next().slideUp();
    } else {
      $(this).addClass("active");    //1 .faqItem에 active가 붙음.(별도 효과는 없음)
      $(this).children('.arrow').removeClass('fa-angle-up').addClass('fa-angle-down'); //2 .faqItem의 하위 .arrow를 찾아 화살표 모양 변경
      $(this).next().slideDown(); //3 .faqItem의 다음 동위자식을 slideDown()시킴     
    }
  });
});

#2. 아코디언형식에서 XEIcon 사용해서 화살표 바꾸기

 

See the Pen 아코디언형식에서 XEIcon 사용하기 by limhaneul2244 (@limhaneul2244) on CodePen.

 

---

위의 아코디언은 아래의 자료를 참고로 만들었습니다.

 

아코디언 메뉴 만들기