Accordion Pattern Collection(아코디언 메뉴)

아코디언 메뉴 타입 모음

아코디언 메뉴에 대한 다양한 자바스크립트 코드 패턴을 알아봅니다.

아코디언 메뉴 JS 패턴 #1

See the Pen 아코디언 메뉴 패턴 #1 by jaeheekim (@jaehee) on CodePen.

아코디언 메뉴 JS 패턴 #2

클릭했던 메뉴를 다시 클릭하면 닫히지 않고 다른 메뉴를 클릭해야만 닫히도록 구현한 경우입니다.

See the Pen 아코디언 패턴 #2 by jaeheekim (@jaehee) on CodePen.

아코디언 메뉴 JS 패턴 #3

삼항 연산자를 이용한 패턴입니다.

See the Pen 아코디언 패턴 #3 by jaeheekim (@jaehee) on CodePen.

아코디언 메뉴 JS 패턴 #4

객체 리터럴 방식으로 싱글톤 패턴입니다.

See the Pen 아코디언 패턴 #4 by jaeheekim (@jaehee) on CodePen.

아코디언 메뉴 JS 패턴 #5

생성자 함수를 이용한 패턴입니다.

See the Pen 아코디언 패턴 #5(생성자) by jaeheekim (@jaehee) on CodePen.

아코디언 메뉴 JS 패턴 #6

모듈 패턴까지는 아니지만 유사한 패턴입니다.

See the Pen 아코디언 메뉴 #7 by jaeheekim (@jaehee) on CodePen.

아코디언 메뉴 JS 패턴(Widget Factory) #7

$.widget() 을 사용합니다.

See the Pen 아코디언 Widget Factory by jaeheekim (@jaehee) on CodePen.

아코디언 메뉴 JS 패턴 #8

애니메이션이 추가된 패턴입니다.

See the Pen 아코디언 메뉴 패턴 #6 (애니메이션) by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub