아코디언 옵션좀 알려주세요..

아코디언 옵션좀 알려주세요..

QA

아코디언 옵션좀 알려주세요..

본문

http://lsp80.cafe24.com/ac.php

 

코드 그대로 사용하셔도  보실수 있습니다.

 

1.아코디언이 카테고리1 항목이 열려있는데, 처음부터 닫혀있게 하려면 어떻게 해야하나요?

2. 파란색 말고 다른색으로 변경하고 싶은데 옵션을어떻게 해야하나요?

 

 

아코디언 위젯 | jQuery UI API 문서

확인해서 해보는데 버전이 다른건지 코드가 조금씩 달라서 안되고있습니다.

위 2가지만 방법 알려주세요~

 

 


<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript">
  $( function() {
    $( "#accordion" ).accordion(); /* $("아코디언실행할선택자").accordion(); */
  } );
  </script>
  <style type="text/css">
    #accordion {width:100%; margin:0 auto;}
  </style>

<div id="accordion">
  <h3>카테고리1</h3>
 <div>
  
 <table width="100%">
 <tr>
  <td><input type="checkbox" name="select1_option[]" id="select1_option1" class='select1_option' > <label for="select1_option1">상품1</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select1_option[]" id="select1_option2" class='select1_option' > <label for="select1_option2">상품2</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select1_option[]" id="select1_option3" class='select1_option' > <label for="select1_option3">상품3</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select1_option[]" id="select1_option4" class='select1_option' > <label for="select1_option4">상품4</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select1_option[]" id="select1_option5" class='select1_option' > <label for="select1_option5">상품5</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select1_option[]" id="select1_option6" class='select1_option' > <label for="select1_option6">상품6</label></td>
 </tr>
 </table>
 </div>
 <h3>카테고리2</h3>
 <div>
 <table width="100%">
 <tr>
  <td><input type="checkbox" name="select2_option[]" id="select2_option1" > <label for="select2_option1">상품7</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select2_option[]" id="select2_option2" > <label for="select2_option2">상품8</label></td>
 </tr>r
 <tr>
  <td><input type="checkbox" name="select2_option[]" id="select2_option3" > <label for="select2_option3">상품9</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select2_option[]" id="select2_option4" > <label for="select2_option4">상품10</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select2_option[]" id="select2_option5" > <label for="select2_option5">상품11</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select2_option[]" id="select2_option6" > <label for="select2_option6">상품12</label></td>
 </tr>
 </table>
 </div>
 <h3>카테고리3</h3>
 <div>
 <table width="100%">
 <tr>
  <td><input type="checkbox" name="select3_option[]" id="select3_option1" > <label for="select3_option1">상품13</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select3_option[]" id="select3_option2" > <label for="select3_option2">상품14</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select3_option[]" id="select3_option3" > <label for="select3_option3">상품15</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select3_option[]" id="select3_option4" > <label for="select3_option4">상품16</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select3_option[]" id="select3_option5" > <label for="select3_option5">상품17</label></td>
 </tr>
 <tr>
  <td><input type="checkbox" name="select3_option[]" id="select3_option6" > <label for="select3_option6">상품18</label></td>
 </tr>
 </table>
 </div>
 </div>

이 질문에 댓글 쓰기 :

답변 2


<script type="text/javascript"> 
$( function() { 
     $( "#accordion" ).accordion(); 
      /* $("아코디언실행할선택자").accordion(); */ 
   $("#ui-id-2").hide();   //추가
} ); 
</script>

위와같이 해보시는게 어떠실지

플래토님 답변 감사합니다. 예전에도 도움받아서 감사하게 생각하고있습니다.

우선 말씀해주신 코드는 해당 버전에서 적용인안되고, 옵션을 찾긴 했습니다.

 $( "#accordion" ).accordion({
      collapsible: true,
      active: false
    });


 active: false
옵션이 처음부터 닫혀있게 하는것이네요..

답변 주셔서 다시한번 감사합니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,162 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT