Sorting accordion alphabetical with jquery

Question

Hi I have an accordion and I want to sort them alphabetical.

What I want is at the top over all accordions 4 buttons to sort them alphabetical by:

Name, Lastname, Street, City

So here is my HTML Code.

<div class="all">
        <div class="accordion-head">
            <div style="width: 25%;">Name</div>
            <div style="width: 25%;">Latname</div>
            <div style="width: 25%;">Street</div>
            <div style="width: 25%;">City</div>
        </div>  

   <div class="detail inside_accoridon">
        <div class="col_6">Google Maps</div>
        <div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </div>
</div>


<div class="all">
        <div class="accordion-head">
            <div style="width: 25%;">Name</div>
            <div style="width: 25%;">Latname</div>
            <div style="width: 25%;">Street</div>
            <div style="width: 25%;">City</div>
        </div>  

   <div class="detail inside_accoridon">
        <div class="col_6">Google Maps</div>
        <div class="col_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </div>
</div>

Hope someone have an idea how can I handle this.

Best regards.

Answer 1

Add an id-attribute to your div.all and classes to the td-tags, e.g:

<div id="acc-1" class="all">
    ...  
    <td class="acc-name" width="25%">Name</td>
    <td class="acc-lastname" width="25%">Lastname</td>
    <td class="acc-street" width="25%">Street</td>
    <td class="acc-city" width="25%">City</td>
    ...
</div>

Then generate 4 associative arrays with Name, Lastname, Street and City as keys and the accordion-item-ids as values like:

var names = {};
$('div.all').each(function() {
    names[$(this).find('td.name').text()] = $(this).attr('id');
});

And now you can sort your arrays with array.sort(); and change the order of the accordion.