Merge Jquery accordion content

Question

I have the following accordions which are created dynamically:

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

I need to merge their inner tables under one header in real time. What is the javascript code to merge accordion content?

Thanks.

Answer 1

Here is the code that will merge the contents (table headers from div#Test2 ) into the table found inside of div#Test1 . It is a fairly light lift where we target the DOM elements with specific selectors. We use the console to make certain we are targeting the right things as well as monitor the before and after effects.

The jQuery methods/Documentation used here were:

.each() for iteration.

.appendTo() to select the current DOM in our iteration and insert it after the last item within the target element (which in this case, was a table row).

.hide() to hide DOM elements.

jQuery Fiddle

var targetFocus = $('div#Test2').find('th');
console.log('Second TH Count: ' + targetFocus.length); //Initial Test 2 table header

targetFocus.each(function() {
  var $container = $('div#Test1').find('table:eq(0) tbody tr');
  $(this).appendTo($container);
  console.log($container.length);
});

targetFocus = $('div#Test1').find('th');
console.log('First TH Count: ' + targetFocus.length);

if ($('div#Test2').find('th').length === 0) {
  $('div#Test2').hide();
}

Lastly, once we know for certain that the merge was successful we can hide the emptied out table with the .hide() jQuery method.

 var targetFocus = $('div#Test2').find('th'); console.log('Second TH Count: ' + targetFocus.length); //Initial Test 2 table header targetFocus.each(function(i) { var $container = $('div#Test1').find('table:eq(0) tbody tr'); $(this).appendTo($container); console.log($container.length); }); targetFocus = $('div#Test1').find('th'); console.log('First TH Count: ' + targetFocus.length); 

 div#Test2 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <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 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 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>