목록으로

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

수난이대 3년 전 조회 1,913

답변 2

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

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

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

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

https://api.jqueryui.com/accordion/">아코디언 위젯 | jQuery UI API 문서

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

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

</p>

<p><script  src="<a href="<a href="http://code.jquery.com/jquery-latest.min.js"></script" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script</a>"><a href="http://code.jquery.com/jquery-latest.min.js"></script" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script</a></a>>

<link rel="stylesheet" href="<a href="<a href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" target="_blank" rel="noopener noreferrer">https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css</a>"><a href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" target="_blank" rel="noopener noreferrer">https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css</a></a>">

  <script src="<a href="<a href="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script" target="_blank" rel="noopener noreferrer">https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script</a>"><a href="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script" target="_blank" rel="noopener noreferrer">https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script</a></a>>

  <script type="text/javascript">

  $( function() {

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

  } );</p>

<p>  </script>

  <style type="text/css">

    #accordion {width:100%; margin:0 auto;}

  </style></p>

<p>

<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></p>

<p> </div></p>

<p> <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></p>

<p> <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></p>

<p> </div></p>

<p>

#아코디언

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

답변 2개

정렬:

채택된 답변

+20 포인트

마르스컴퍼니 Expert

3년 전

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

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

플래토

3년 전

</p>

<p><code><script type="text/javascript"> </code></p>

<p><code>$( function() { </code></p>

<p><code>     $( "#accordion" ).accordion(); </code></p>

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

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

<p><code>} ); </code></p>

<p><code></script></code></p>

<p>

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

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

답변에 대한 댓글 2개

�

수난이대

3년 전

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

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

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

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

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

�

플래토

3년 전

@수난이대 옵션을 찾아서 해결하셨다니 다행이네요

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

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

로그인

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

답변 2개

답변에 대한 댓글 2개

공유하기