ksup ksup - 5 months ago 25
jQuery Question

Open JQuery accordion based on its ID

I am trying to get my code to close all accordions based on an event and then open a specific accordion based on it's ID. My accordions are created dynamically and could by a lot of them. My accordions look like:

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


The close all part is working fine with:

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


But based on an event which I can get both the div accordion ID or the table inside the accordion ID In need to open only the specific accordion.
What javascript code will give me the ref to the specific accordion so I can use:

.show()


In order to open it?

T J T J
Answer

You seem to have a lot of accordions with a single panel. To close such jQuery UI Accordion in a proper way, you should set the collapsible option. For more info see Is possible to have only one section in jQuery UI Accordion?. I suggest having single accordion with multiple panels compared to what you have.


That said, to open a specific accordion you can just set it's only panel (at index 0) as active using the active option like:

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

To close all the accordions, you need to add a common selector like an accordion class to all of them and do:

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

or with your existing markup something like:

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