접히고 펼치고하는 메뉴를 toggle로 구현해보자

간단하지만 한 번쯤은 꼭 쓸일이 있는

클릭하면 접히고 펼치고 하는 BOX를 만들어 보았다.

이거 잘 활용하면 select 박스로도 쓸 수 있을듯...

See the Pen Untitled by Yongkyu, Lee (@Yongkyu) on CodePen.

 

 

 

같은 기능을 반복적으로 동작하는데는 제이쿼리의 toggle만한 기능이 없는것 같다.

주의할 점이라면 대상을 클래스명으로 지정할경우 같은 클래스를 가진 요소들이 전부 같은 기능을 한다는 것이다.

이 때문에 ID값을 프론트단에서 미리 지정해버리면 개발자들이...아주 싫어하겠지?

이 예제에서 주의깊게 볼 점은 이것이다.

 (this).next 그것 이후에 

$(document).ready(function() {
    $('.expand_header').on('click', function() {
        $(this).toggleClass('active');
        $(this).next('.expand_cont').slideToggle(200);
    });
});