skip navigation

Accordion

[VIEW]
  • 아코디언.01 내용 더 보기
  • 아코디언.02 내용 더 보기
[CODE]
<div class="ui_accordion" data-accord-group="info" data-open-index="1" data-single-open="true"> <ul> <li> <div class="head"> <a href="#" class="ui_accord_toggle" data-open-text="내용 더 보기" data-close-text="내용 닫기"> <span class="tit">아코디언.01</span> <span class="hide ui_accord_text">내용 더 보기</span> </a> </div> <div class="ui_accord_content" style="display:none;"> <p><strong>아코디언 내용.01</strong></p> <div class="list_box_nt"> <ul class="txt_list"> <li><span class="txt_bar">아코디언 내용.01</span></li> </ul> </div> </div> </li> <li> <div class="head"> <a href="#" class="ui_accord_toggle" data-open-text="내용 더 보기" data-close-text="내용 닫기"> <span class="tit">아코디언.02</span> <span class="hide ui_accord_text">내용 더 보기</span> </a> </div> <div class="ui_accord_content" style="display:none;"> <p><strong>아코디언 내용.02</strong></p> <div class="list_box_nt solo"> <ul class="txt_list"> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> <li><span class="txt_bar">아코디언 내용.02</span></li> </ul> </div> </div> </li> </ul> </div>

  • 자바스크립트 적용부분

  • - data-accord-group="info" 그룹으로 다른 아코디언을 연결함.
    data-open-index="1" 오픈 인텍스를 설정함 0시작.
    data-single-open="true" false는 멀티오픈을 허용함.

<script type='text/javascript'> $(function () { vcui.require(['ui/accordion']).done(function () { $('.ui_accordion').vcAccordion().on('accordionexpand', function (e, data) { }); }); }); </script>