Accordions

Getting Started

npm 및 cdn 방식으로 로드하기 프로젝트에 triplexlab 가져오는 방법에는 몇 가지 옵션이 있습니다.

npm i triplexlab

<script src="https://unpkg.com/triplexlab/dist/Actives.min.js"></script>

다음과 같은 옵션으로 사용할수 있습니다.

HTML

<div class="tr_container">
  <ul>
     <li class="tr_item">
        <h3 class="accordion_tit">Section 1</h3>
        <div class="tr_acc_box faq_item_content">
          <p class="accordion_txt">
            1.Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a
            nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
          </p>
        </div>
     </li>
  </ul>
</div>

JavaScript

(function () {
  new tr.Accordions({
    targets: '.tr_container',
    event: 'click', // 이벤트 mouseenter와, click 2가지를 옵션으로 넣을수 있습니다.
    firstItemActive: false, // 첫번째 아이템을 활성화 할건지 여부체크 true or false (기본 값으로 false)
    duration: 0.5, // 활성화되는 시간을 컨트롤 할수 있습니다.(기본 값으로 0.4초를 가지고 있습니다.)
    autoplay: true, // 각각의 리스트를 자동으로 플레이를 시키고, 몇초 간격으로 할것인지 설정할수 있습니다.
    loop: false, // autoplay를 무한 반복 시킬것인지 여부체크 true or false (기본 값으로 false)
    eventClick(e) { // 이벤트 클릭에 콜백 정의 (필수 입력값입니다.)
      const _selfSib = $(e.currentTarget).siblings().find('.tr_acc_box');
      const _self = $(e.currentTarget).find('.tr_acc_box');
      this.unactive(_selfSib); // height: 0의 스타일 정의되어 있습니다. 인자로 비활성화 시킬 target나머지 들을 넣으세요.
      this.active(_self); // height: 'auto'의 스타일 정의되어 있습니다. 인자로 활성화 시킬 target을 넣으세요.
    },
  });
})();

event 옵션과 autoplay 옵션을 같이 사용하는 경우에 첫 렌더링 시점에 autoplay가 실행이 되고, event가 발생되면 autoplay는 해제가 됩니다.

autoplay 및 firstItemActive 옵션은 함께 활성화할 수 없습니다. 자동 재생을 실행하려면 firstItemActive: false를 수행해야 합니다.

👉🏻예시확인

stackblitz 사이트 확인