SPSTRAP Document API

Toggle Animation

<div class="sp--toggle" 
                                theme="light-bottom-left[-1px]"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-gray-both" scale="xl">
                                    <span>No Effect</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>

<br />
                            <div class="sp--toggle" 
                                effect="[fade]"
                                theme="light-bottom-left"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-gray-both" scale="xl">
                                    <span>Fade Effect</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>

<br />
                            <div class="sp--toggle" 
                                effect="[slideup]"
                                theme="light-bottom-left"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-gray-both" scale="xl">
                                    <span>SlideUp Effect</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>

<br />
                            <div class="sp--toggle" 
                                effect="[slidedown]"
                                theme="light-bottom-left"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-gray-both" scale="xl">
                                    <span>SlideDown Effect</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>

Toggle Color

<br />
                            <div class="sp--toggle" 
                                theme="[light]-bottom-left"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-light-both" scale="xl">
                                    <span>light</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>

<br />
                            <div class="sp--toggle" 
                                theme="[primary]-bottom-left"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-primary-both" scale="xl">
                                    <span>primary</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>

Toggle Direction

<br />
                            <div class="sp--toggle" 
                                theme="dark-[top-right]"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-dark-both" scale="xl">
                                    <span>top right</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>

<br />
                            <div class="sp--toggle" 
                                theme="dark-[middle-left]"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-dark-both" scale="xl">
                                    <span>middle left</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>
                            
                            <br />
                            <div class="sp--toggle" 
                                theme="dark-[middle-right]"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-dark-both" scale="xl">
                                    <span>middle right</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>
                            
                            <br />
                            <div class="sp--toggle" 
                                theme="dark-[bottom-left]"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-dark-both" scale="xl">
                                    <span>bottom left</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>
                            
                            <br />
                            <div class="sp--toggle" 
                                theme="dark-[bottom-right]"
                            >
                                <a href="#!" class="sp--btn sp--toggle-btn" theme="line-dark-both" scale="xl">
                                    <span>bottom right</span>
                                    <span reaction><i class="sp--icon" ico="bracket" rotate="90"></i></span>
                                </a>
                                <div class="sp--toggle-contents">
                                    <div style="padding:20px 30px;">
                                        샘플 컨텐츠
                                    </div>
                                </div>
                            </div>

Toggle Chain Class

<style>
                                .sp--toggle-sample {
                                    border:1px solid #333;padding:30px;
                                }
                                .sp--toggle-sample.sp--toggle-on {
                                    border:5px dashed #333;
                                }
                            </style>
                            <div class="sp--toggle sp--toggle-sample">
                                <button class="sp--toggle-btn" data-target="div" [data-scope="chain"]>토글 클래스 - 체인</button>
                            </div>
                            <div class="sp--toggle sp--toggle-sample">
                                <button class="sp--toggle-btn" data-target="div" [data-scope="chain"]>토글 클래스 - 체인</button>
                            </div>
                            <div class="sp--toggle sp--toggle-sample">
                                <button class="sp--toggle-btn" data-target="div" [data-scope="chain"]>토글 클래스 - 체인</button>
                            </div>

Toggle Chain Class

<style>
                                .sp--toggle-sample {
                                    border:1px solid #333;padding:30px;
                                }
                                .sp--toggle-sample.sp--toggle-on {
                                    border:5px dashed #333;
                                }
                            </style>
                            <div class="sp--toggle sp--toggle-sample">
                                <button class="sp--toggle-btn" data-target="div">토글 클래스 - 멀티</button>
                            </div>
                            <div class="sp--toggle sp--toggle-sample">
                                <button class="sp--toggle-btn" data-target="div">토글 클래스 - 멀티</button>
                            </div>
                            <div class="sp--toggle sp--toggle-sample">
                                <button class="sp--toggle-btn" data-target="div">토글 클래스 - 멀티</button>
                            </div>

Toggle Self

Toggle Hover event

Toggle Some Class

Toggle Closeall btn

Class

name	description
.sp--toggle	토글의 컨테이너 요소.
.sp--toggle-btn	토글 컨테이너에 영향을 주는 버튼
.sp--toggle-on	토글이 활성화 됐음을 인지시키는 클래스

Attribute

name	description
data-target	default : 'div' ( string ) 버튼의 부모를 찾아서 토글을 수행한다. 없다면 스스로를 토글한다.
data-scope	default : '' ( string ) 현재는 1개의 옵션만 존재 ( chain ) 체인으로 연결된 토글은 부모끼리 서로 상호동작한다.
data-class	default : '' ( string ) 특정 클래스를 토글하고 싶을때 정의한다. 기본적으로 토글의 명칭은 ".sp--toggle-on" 이다. 만약 .test 라는 클래스를 토글하고 싶다면, data-class=".test" 라고 정의하자.

Etc

토글의 애니메이션은 설계된 바 없다.
기본적으로 토글은 숨김, 보여줌의 형태가 아닌
활성화, 비활성화의 형태로 마크업 된다. 때문에 컨테이너의 애니메이션은 의미 없다.

토글과 쿠키를 헷갈리지 말자. 완전 다른 기능이다.