[JS] 아코디언 라이브러리 - 1

개요

[작업물] 아코디언 라이브러리에서 만들었던 아코디언 라이브러리 튜토리얼.

이번 포스팅에선 조금 상세하게 튜토리얼을 작성해보자.

 

작업 세부 사항

우선 퍼블리셔들한테 익숙한 swiper 라이브러리와 비슷한 사용 방식으로 제작할 예정이다.

1. html 상단에서 script 파일 불러오기
2. 구조에 맞는 html 작성 후 본인이 원하는 css 스타일링
3. 페이지 하단에서 객체 생성

 

HTML

html 구성은 최대한 간단하게 작성하였다.

<ul class="accordion_container">
    <li class="accordion_item">
        <div class="accordion_title">Title 1</div>
        <div class="accordion_content">Content 1</div>
    </li>
    <li class="accordion_item">
        <div class="accordion_title">Title 2</div>
        <div class="accordion_content">Content 2</div>
    </li>
    <li class="accordion_item">
        <div class="accordion_title">Title 3</div>
        <div class="accordion_content">Content 3</div>
    </li>
</ul>

클래스로 DOM을 선택할거기 때문에, 태그는 크게 상관 없다. ul - li로 하든 div로 하던..

단지 html 문맥 상 주로 faq 같은곳에서 사용할 가능성이 크다고 생각해서 ul - li로 구성하였다.

 

JS

class로 2개의 객체를 만들껀데 Accordion, 그리고 AccordionItem을 만들 예정이다.

Accordion내부에 AccordionItem들이 존재하는 방식으로... 각 아코디언마다 객체를 생성하는게 불필요할꺼 같아서.

 

Accordion

class Accordion {
    constructor(el) {
        this.el = document.querySelector(el);
        this.init();
    }

    init() {
        this.items = [...this.el.querySelectorAll('.accordion_item')]
        .map(item => new AccordionItem(item));
    }
}

우선 Accordion은 간단하게 el = 클래스 명을 받아서 셀렉터로 this.el로 저장해두게 하였다.

 

this.el에서 querySelectorAll로 ".accordion_item"들을 모두 선택 한 뒤, 전개연산자로 일반 배열로 변경 후,

map()을 이용해서 new AccordionItem()으로 생성된 객체들의 배열을 this.items로 저장해주었다.

 

AccordionItem

class AccordionItem {
    constructor(el) {
        this.el = el;
        this.init();
    }

    init() {
        this.active = false;
        this.title = this.el.querySelector('.accordion_title');
        this.content = this.el.querySelector('.accordion_content');
        this.style = this.el.style;
        
        this.style.maxHeight = `${this.title.scrollHeight}px`;
        this.style.overflow = 'hidden';
        
        this.el.addEventListener('click', () => this.toggle());
    }

    open() {
        this.active = true;
        this.style.maxHeight = `${this.title.scrollHeight + this.content.scrollHeight}px`;
    }

    close() {
        this.active = false;
        this.style.maxHeight = `${this.title.scrollHeight}px`;
    }

    toggle() {
        if(!this.active) this.open();
        else this.close();
    }
}

AccordionItem은 조금 할게 많은데 우선 constructor 부분은 Accordion과 큰 차이 없고,

init() 매서드에서 지금 상태를 표현할 actvie를 false로 지정,

title, content를 각각 지정, 그리고 이후 많이 사용해야 하는 this.el.style도 this.style로 지정해놓는다.

이후 this.style의 max-height를 this.title의 scrollHeight로 저장하고, overflow 속성도 hidden으로 지정한다.

이렇게 하면 this.el, 즉 .accordion_item의 title 부분까지가 max-height로 설정되고,

overflow 속성이 hidden이므로 content부분이 표시되지 않는다.

그리고 마지막으로 this.el에 click 이벤트로 this.toggle 매서드를 연결해준다.

 

open()과 close() 매서드에서는 각각 this.active 상태를 바꿔주고,

this.style에서 max-height 부분을 접힐때는 타이틀의 높이로, 펼쳐질때는 타이틀의 높이 + 콘텐츠의 높이로 해준다.

이때 maxHeight null을 줘버릴 경우, transition 등으로 부드럽게 접혔다 펼쳐졌다 하는 애니메이션이 끊길 수 있다.

 

마지막으로 toggle() 매서드에서는 this.active값이 false면 this.open()을 실행해주고,

반대일 경우 this.close()를 실행해주면 기본적으로 접혔다 펴졌다 하는 아코디언이 생성된다.

 

다음 포스팅에선 아코디언 객체에서 모든 아코디언을 펼치거나 접는등의 기능을 하는 매서드와,

객체를 생성할때 속성을 입력해 초기 설정을 하는 부분을 만들어보자.