개인적으로 사용하려고 만든 플로그인입니다.
- 다운로드.zip 및 min 파일를 다운로드 받습니다.
<head></head>사이 또는<body>영역에<script src="accordion.min.js"></script>삽입하시면 됩니다.
- 1번째 탭 말고도 활성화 가능함.
- 클래스 변경가능
<dl class="accordion-exam-dl" id="accExamDL">
<dt class="accordion-heading">
<a class="accordion-trigger" href="#testPanel" id="testId" aria-controls="testPanel"><span class="accordion-title">아코디언 메뉴1</span></a>
</dt>
<dd class="accordion-panel" id="testPanel">아코디언 Panel 1</dd>
<dt class="accordion-heading">
<a class="accordion-trigger" href="#" id="testId2" aria-controls="testPanel2"><span class="accordion-title">아코디언 메뉴2</span></a>
</dt>
<dd class="accordion-panel" id="testPanel2">아코디언 Panel 2</dd>
</dl>$(document).ready(function(){
$('#accExamDL').accordionUi();
});<ul class="accordion-exam-ul" id="accExamUL">
<li>
<div class="accordion-heading">
<a class="accordion-trigger" href="#" id="testUlBtn" aria-controls="testUlPanel1"><span class="accordion-title">아코디언 메뉴1</span></a>
</div>
<div class="accordion-panel" id="testUlPanel1">아코디언 UL Panel 1</div>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-trigger" href="#" id="testUlBtn2" aria-controls="testUlPanel2"><span class="accordion-title">아코디언 메뉴2</span></a>
</div>
<div class="accordion-panel" id="testUlPanel2">아코디언 UL Panel 2</div>
</li>
</ul><ul class="accordion-exam-ul open" id="accExamULOpen">
<li>
<div class="accordion-heading">
<a class="accordion-trigger is-current" href="#" id="testUlBtnOpen" aria-controls="testUlOpenPanel1"><span class="accordion-title">아코디언 메뉴1</span></a>
</div>
<div class="accordion-panel" id="testUlOpenPanel1">아코디언 UL Panel Open 1</div>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-trigger is-current" href="#" id="testUlBtnOpen2" aria-controls="testUlOpenPanel2"><span class="accordion-title">아코디언 메뉴2</span></a>
</div>
<div class="accordion-panel" id="testUlOpenPanel2">아코디언 UL Panel Open 2</div>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-trigger is-current" href="#" id="testUlBtnOpen3" aria-controls="testUlOpenPanel3"><span class="accordion-title">아코디언 메뉴3</span></a>
</div>
<div class="accordion-panel" id="testUlOpenPanel3">아코디언 UL Panel Open 3</div>
</li>
</ul>accordion-trigger에는 is-current를 넣어야 하며,accordion-panel에는 display:block되어야 합니다.
triggerClass- accordion-triggerpanelClass- accordion-panelheadingClass- accordion-headingactiveClass- 활성화 클래스 (기본 값: is-current)viewMoving- 화면 이동 (기본 값: false)
// 화면 이동
$(document).ready(function(){
$('#accExam').accordionUi({
viewMoving: true
});
});- 키보드 접근에 대한 보완 필요성 보임.
- div태그 일 경우 수 추가 (uniqueId 만들기)
- 클릭시 닫히는거 추가 (현재는 닫히는데 옵션 값으로 구분)
혼자 연습하면서 사용하려고 만들어 봤던 플로그인을 공개합니다. 아직 미완성이라 안되는 것이 은근 많습니다. ㅠㅠ
피드백은 이슈에 해주시면 감사하겠습니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent