SPSTRAP Document API

base markup

<div class="sp--accordion sp--css-notready"                 // 컨테이너
                                data-tabevent="click"                                   // click or mouseenter
                                data-initialtab="0"                                     // 시작 인덱스
                                data-scope="single"                                     // single or multi ( 설정 안하면 멀티가 기본 )
                            >
                                
                                <div class="sp--accordion-array">
                                    
                                    <button class="sp--accordion-btn">아코디언</button>     // 아코디언 버튼
                                    <div class="sp--accordion-contents">                   // 아코디언 내부 컨텐츠
                                        아코디언 컨텐츠
                                    </div>
                                </div>
                                
                                <div class="sp--accordion-array">
                                    
                                    <button class="sp--accordion-btn">아코디언</button>     // 아코디언 버튼
                                    <div class="sp--accordion-contents">                   // 아코디언 내부 컨텐츠
                                        아코디언 컨텐츠
                                    </div>
                                </div>
                            </div>

initialtab

<div class="sp--accordion sp--css-notready"
                                data-initialtab="1"                     // 시작하는 index 설정
                            >
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                                <div class="sp--accordion-array [sp--accordion-active]">    // 강제로 시작할 컨텐츠
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                            </div>

no effect single

<div class="sp--accordion sp--css-notready"
                                data-initialtab="0"
                                data-scope="single"
                            >
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                            </div>

no effect multiple

Fade single

<div class="sp--accordion sp--css-notready"
                                data-initialtab="0"
                                data-scope="single"
                                data-effect="fade"
                            >
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                            </div>

Fade multiple

<div class="sp--accordion sp--css-notready"
                                data-initialtab="0"
                                data-effect="fade"
                            >
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                            </div>

Slide single

<div class="sp--accordion sp--css-notready"
                                data-initialtab="0"
                                data-scope="single"
                                data-effect="slide"
                            >
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                            </div>

Slide multiple

<div class="sp--accordion sp--css-notready"
                                data-initialtab="0"
                                data-effect="slide"
                            >
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                                <div class="sp--accordion-array">
                                    <button class="sp--accordion-btn">button</button>
                                    <div class="sp--accordion-contents">
                                        <img src="https://placeholder.pics/svg/1400x200/aaaaaa/fff">
                                    </div>
                                </div>
                            </div>

Class

name	description
.sp--accordion	아코디언의 컨테이너를 선언
.sp--accordion-array	아코디언 내부 배열을 감싸준다. 탭이 활성화 되면 sp--accordion-active 클래스가 추가된다. sample <div class="sp--accordion-array [sp--accordion-active]"> <button class="sp--accordion-btn">아코디언 A</button> <div class="sp--accordion-contents"> 아코디언 컨텐츠 A </div> </div>
.sp--accordion-btn	아코디언 핸들러 ( 상속버튼 )
.sp--accordion-contents	아코디언 컨텐츠 ( 상속 디비전 )

Attribute

name	description
data-scope	default : '' ( string ) '' or single single 의 경우, 아코디언이 한개만 활성화 된다.
data-tabevent	default : 'click' click or mouseenter 아코디언이 활성화 되는 마우스 이벤트 규칙
data-initialtab	default : '' ( number ) '' or 아코디언의 인덱스 번호 1을 입력하면 첫번째 아코디언이 활성화 된다.
data-effect	default : '' ( string ) '' or 'fade' or 'slide' 아코디언 선택시 보여줄 이펙트, 2가지만 사용된다.

Etc

슬라이딩의 속도는 animation의 기본인 300ms 이다.
이 값은 var.js 에서 css.duraiton 값을 확인하자.