Öffnen Sie JQuery Akkordeon basierend auf seiner ID

Question

Ich versuche, meinen Code alle Akkordeons basierend auf einem Ereignis zu schließen und dann ein bestimmtes Akkordeon basierend auf seiner ID zu öffnen. Meine Akkordeons werden dynamisch erstellt und könnten von vielen von ihnen stammen. Mein Akkordeons wie folgt aussehen:

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

Die enge alle Teil funktioniert gut mit:

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

Aber basierend auf einem Ereignis, das ich sowohl die div Akkordeon-ID oder die Tabelle in der Akkordeon-ID erhalten können In müssen nur das spezifische Akkordeon öffnen. Was Javascript-Code wird mir die ref auf das spezifische Akkordeon geben, so kann ich verwenden:

.show() 

Um es zu öffnen?

Answer 1

Managed es zu lösen:

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

ausgewählt ist die Tabelle ID ich von der Veranstaltung erhalten.

Answer 2

Sie scheinen eine Menge Akkordeons mit einem einzigen Panel zu haben. Um solche jQuery UI Accordion korrekt zu schließen, sollten Sie die Option collapsible einstellen. Für weitere Informationen siehe Is it possible to have only one section in jQuery UI Accordion?. Ich schlage vor, Single-Akkordeon mit mehreren Platten im Vergleich zu dem, was Sie haben.

---

Das heißt, ein bestimmtes Akkordeon öffnen Sie es nur einstellen können nur Panel (bei Index 0) als aktiv mit der active Option wie:

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

alle Akkordeons zu schließen, müssen Sie

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

oder mit Ihrem vorhandenen Markup so etwas wie: eine gemeinsame Selektor wie ein Akkordeon-Klasse für alle von ihnen und tun hinzuzufügen

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