아코디언 라이브러리

개요

간단한 Accordion 컨테이너를 만들어주는 라이브러리.

https://github.com/mooky1007/accordion

GitHub - mooky1007/accordion

 

 

• Title 1
  Content 1
• Title 2
  Content 2
• Title 3
  Content 3

 

사용 방법

1. head 태그 내에 js 파일을 다운로드하거나 ghpage 링크로 스크립트 파일을 불러옵니다.

<script src="./js/accordionContainer.js"></script>
<!-- or -->
<script src="https://mooky1007.github.io/accordion/js/accordionContainer.js"></script>

 

2. 아코디언 html을 생성해줍니다.

클래스명만 제대로 맞춰주면 css는 어떤 식으로 구성하던 상관없습니다.

<div class="accordion_container">
    <ul class="accordion_wrapper">
        <li class="accordion_item active">
            <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>
    <div class="button_wrap">
        <button onclick="accrdion.openAll()">Open All</button>
        <button onclick="accrdion.closeAll()">Close All</button>
    </div>
</div>

 

3. 해당 페이지 body 태그 최하단에서 Accordion객체를 생성해 줍니다.

<script>
    const accrdion = new Accordion(".accordion_container")
</script>

 

Parameters

Accordion객체 생성 시 초기값을 지정할 수 있습니다.

<script>
    const accrdion = new Accordion(".accordion_container", {
        open: false,
        multi: true,
        className: "custom-className"
        //...
    })
</script>

1. open(Boolean, false)

초기값은 false입니다. true일 경우, 아코디언 생성 시 모든 아이템이 펼쳐진 상태로 렌더링 됩니다.

하단의 multi 속성이 true일 경우에만 정상작동 합니다.

2. multi(Boolean, false)

초기값은 false입니다. true일 경우, 아코디언 아이템 여러 개를 동시에 펼쳐 둘 수 있습니다.

false일 경우 하나의 아코디언 아이템만 펼쳐집니다. (다른 아이템이 펼쳐질 경우 나머지 접힘)

3. className(String, "active")

아코디언 아이템이 펼쳐졌을 때, 클래스를 추가할 수 있습니다.

기본값은 "active"입니다.

 

Methods & Properties

생성된 아코디언 객체에 사용할 수 있는 매서드 및 속성들입니다.

<script>
    const accrdion = new Accordion(".accordion_container")

    accrdion.openAll();
</script>

1.init()

아코디언을 초기화/재설정합니다.  초기에 display:none 등의 이유로 아코디언아이템들의 크기영역을 못 불러온 경우

한번 실행시켜서 재설정해줄 수 있습니다.

2.openNum(idx), closeNum(idx)

idx 번째 아코디언 아이템을 각각 펼치거나, 접습니다.

이때 첫 번째 아코디언이라고 openNum(0);이 아닌 세는 숫자 그대로 openNum(1); 로 실행시킵니다.

3.openAll(), closeAll()

모든 아코디언 아이템을 펼치거나, 접을 수 있습니다.