triplexlab
Version:
프론트엔드 개발자가 프로젝트할때 흔하고 많이 하는 작업들을 나만의 플러그인으로 만들었습니다.\ ES6의 class기반으로 만들었고, 공부하는 차원으로 만들었습니다.🧑🏻💻🧑🏻💻
55 lines (50 loc) • 1.63 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Grid</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="faq_component">
<h2>Dynamic Grid</h2>
<span class="btn">
<img class="changeSrc" src="./img/view_list_black.png" alt="아이콘">
</span>
<ul class="faq_inner">
<li class="faq_item">
<h3 class="faq_tit">1How do I set up semantic completion?</h3>
</li>
<li class="faq_item">
<h3 class="faq_tit">2How do I set up semantic completion?</h3>
</li>
<li class="faq_item">
<h3 class="faq_tit">3How do I set up semantic completion?</h3>
</li>
<li class="faq_item">
<h3 class="faq_tit">4How do I set up semantic completion?</h3>
</li>
<li class="faq_item">
<h3 class="faq_tit">5How do I set up semantic completion?</h3>
</li>
<li class="faq_item">
<h3 class="faq_tit">6How do I set up semantic completion?</h3>
</li>
</ul>
</div>
<script src="/dist/build.min.js"></script>
<script>
(function() {
new tr.ToggleDynamic({
targets: {
startEl: '.faq_inner',
endEl: '.faq_item',
eventEl: '.btn',
},
addClassName: 'active'
});
})();
</script>
</body>
</html>