해당 ID를 기반으로 JQuery 아코디언을 엽니 다.

Question

이벤트를 기반으로 모든 아코디언을 닫고 ID를 기반으로 특정 아코디언을 열도록 코드를 작성하려고합니다. 내 아코디언은 동적으로 만들어지며 많은 사람들이이를 만들 수 있습니다. 내가 사업부 아코디언 ID 또는 아코디언 ID 내부의 테이블에서 모두 얻을 수있는 이벤트를 기반으로

var contentAreas = $('#accordion .table-collapse ').hide(); 

그러나 다음과 함께 잘 작동

<div id="accordion" class="emitters head wrapper ui-accordion ui-widget ui-helper-reset ui-sortable" role="tablist"> 
    <div id="Test1"> 
    <h3 class="accordion-header3 accordion-content-active ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" 
    tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><a class="accordion-expand-all" href="#"></a>Name: Test2</h3> 
    <table id="table_test1" class="table-text table-collapse ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="width: 100%; padding: 0px; margin: 0px; font-size: 13px; color: blue; display: table; height: 17px; background-color: rgba(189, 197, 205, 0.45098);" 
    id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false"> 
     <tbody> 
     <tr> 
      <th class="table-text" style="width: 71px">ATF</th> 
      <th class="table-text" style="width: 73px">1.1</th> 
      <th class="table-text" style="width: 107px">2.2</th> 
      <th class="table-text" style="width: 223px">7.53</th> 
      <th class="table-text" style="width: 197px">16:37:31</th> 
      <th class="table-text" style="width: 80px">37.8715</th> 
      <th class="table-text" style="width: 78px">60.8957</th> 
      <th class="table-text" style="width: 202px">21</th> 
      <th class="table-text" style="width: 180px">ACTIVE</th> 
      <th class="table-text" style="width: 145px">35.34</th> 
      <th class="table-text" style="width: 192px">0</th> 
      <th class="table-text" style="width: 125px">27793</th> 
      <th class="table-text" style="width: 136px">0.1</th> 
      <th class="table-text" style="width: 90px">35</th> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
    <div id="Test2"> 
    <h3 class="accordion-header3 accordion-content-active ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a class="accordion-expand-all" href="#"></a>Name: Test2</h3> 
    <table id="table_test2" class="table-text table-collapse ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="width: 100%; padding: 0px; margin: 0px; font-size: 13px; color: darkgreen; display: none; height: 17px; background-color: rgba(189, 197, 205, 0.45098);" 
    id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true"> 
     <tbody> 
     <tr> 
      <th class="table-text" style="width: 71px">11</th> 
      <th class="table-text" style="width: 73px">11</th> 
      <th class="table-text" style="width: 107px">11</th> 
      <th class="table-text" style="width: 223px">2.78</th> 
      <th class="table-text" style="width: 197px">16:37:31</th> 
      <th class="table-text" style="width: 80px">-108.6117</th> 
      <th class="table-text" style="width: 78px">46.6017</th> 
      <th class="table-text" style="width: 202px">CDF</th> 
      <th class="table-text" style="width: 180px">ACTIVE</th> 
      <th class="table-text" style="width: 145px">11</th> 
      <th class="table-text" style="width: 192px">0</th> 
      <th class="table-text" style="width: 125px">11</th> 
      <th class="table-text" style="width: 136px">0.1</th> 
      <th class="table-text" style="width: 90px">11</th> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

닫기 모든 부분 : 내 아코디언는 다음과 같다 특정 아코디언 만 열 필요가 있습니다. 나에게 특정 아코디언에 심판을 줄 것이다 자바 스크립트 코드는 그래서 을 사용할 수 있습니다 무엇 :

.show() 

을 열려면?

Answer 1

에 의해 그것을 해결하기 위해 관리.

Answer 2

하나의 패널에 많은 아코디언이있는 것 같습니다. 이러한 jQuery UI Accordion을 적절한 방법으로 닫으려면 collapsible 옵션을 설정해야합니다. 자세한 내용은 Is it possible to have only one section in jQuery UI Accordion?을 참조하십시오. 나는 당신이 가지고있는 것에 비해 여러 개의 패널을 가진 싱글 아코디언을 가지고있는 것이 좋습니다.

---

방금 ​​설정할 수있는 특정 아코디언을 열고, 말했다는 active 옵션을 같이 사용하여 활성 (인덱스 0에서) 전용 패널입니다 :

$("#Test2").accordion("option", "active", 0); 

모든 아코디언을 닫으려면, 당신이 필요로하는 그들 모두에 아코디언 클래스와 같은 공통 선택기를 추가 할 수 있습니다 :

$(".accordion").accordion("option", "active", false); 

또는 같은 기존의 마크 업 뭔가 :

를 선택

var index = $('#accordion').find('table'); 
    for(var j=0; j<index.length; j++){ 
     if(index[j].id == selected){ 
      $("#accordion").accordion("option", "active", j); 
     } 
    } 

내가 이벤트에서 얻을 테이블 ID입니다 :

$("#accordion > div").accordion("option", "active", false);