SIR
목록으로

아코디언 옵션좀 알려주세요.. 채택완료

수수난이대
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 2,029
답변 2
목록

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

 

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

 

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

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

 

 

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

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

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

 

 

Copy 
<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개

채택된 답변
+20 포인트

  <style type="text/css">
    .ui-accordion-header.ui-state-active { background-color: #333; }
  </style>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 
<script type="text/javascript"> 

$( function() { 

     $( "#accordion" ).accordion(); 

      /* $("아코디언실행할선택자").accordion(); */ 

   $("#ui-id-2").hide();   //추가

} ); 

</script>

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

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

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

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


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

답변 주셔서 다시한번 감사합니다.
@수난이대 옵션을 찾아서 해결하셨다니 다행이네요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고