아코디언 옵션좀 알려주세요..
본문
http://lsp80.cafe24.com/ac.php
코드 그대로 사용하셔도 보실수 있습니다.
1.아코디언이 카테고리1 항목이 열려있는데, 처음부터 닫혀있게 하려면 어떻게 해야하나요?
2. 파란색 말고 다른색으로 변경하고 싶은데 옵션을어떻게 해야하나요?
확인해서 해보는데 버전이 다른건지 코드가 조금씩 달라서 안되고있습니다.
위 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
<style type="text/css">
.ui-accordion-header.ui-state-active { background-color: #333; }
</style>
<script type="text/javascript">
$( function() {
$( "#accordion" ).accordion();
/* $("아코디언실행할선택자").accordion(); */
$("#ui-id-2").hide(); //추가
} );
</script>
위와같이 해보시는게 어떠실지
!-->
답변을 작성하시기 전에 로그인 해주세요.