triplexlab
Version:
프론트엔드 개발자가 프로젝트할때 흔하고 많이 하는 작업들을 나만의 플러그인으로 만들었습니다.\ ES6의 class기반으로 만들었고, 공부하는 차원으로 만들었습니다.🧑🏻💻🧑🏻💻
83 lines (81 loc) • 4.84 kB
HTML
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="app.css" />
<title>Accordion</title>
</head>
<body>
<div class="component tr_container">
<ul class="inner">
<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. 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>
<li class="tr_item">
<h3 class="accordion_tit">Section 2</h3>
<div class="tr_acc_box faq_item_content">
<p class="accordion_txt">
2.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>
<li class="tr_item">
<h3 class="accordion_tit">Section 3</h3>
<div class="tr_acc_box faq_item_content">
<p class="accordion_txt">
3.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>
<li class="tr_item">
<h3 class="accordion_tit">Section 4</h3>
<div class="tr_acc_box faq_item_content">
<p class="accordion_txt">
4.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>
<li class="tr_item">
<h3 class="accordion_tit">Section 5</h3>
<div class="tr_acc_box faq_item_content">
<p class="accordion_txt">
5.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>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="/dist/actives.min.js"></script>
<script>
(function () {
const my = new tr.Accordions({
targets: '.tr_container',
firstItemActive: true, // 첫번째 아이템을 활성화 할건지 여부체크 true or false (기본 값으로 false)
duration: 0.8, // 활성화되는 시간을 컨트롤 할수 있습니다.(기본 값으로 0.4초를 가지고 있습니다.)
autoplay: false, // 각각의 리스트를 자동으로 플레이를 시킬지 여부체크 true or false (기본 값으로 false)
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을 넣으세요.
}
});
})();
</script>
</body>
</html>