0

I have an accordion with many items in random sequence. How can I have these items sorted when the accordion loads:

< div class="accordion" >
    < h3>Abc </h3 > 
    < p>Some text. </p > 

    < h3>Cab </h3 > 
    < p>Some text. </p > 

    < h3>Bac </h3 > 
    < p>Some text. </p > 
< /div >
Hurumhei
  • 21
  • 1
  • 4
  • Sort them before you create the accordion. Sorting with jQuery: http://stackoverflow.com/questions/282670/easiest-way-to-sort-dom-nodes – Zac Jul 04 '12 at 06:06
  • What have you tried? Please post some of your code. It isn't very clear what you want help with. – Polyov Jul 04 '12 at 06:06

2 Answers2

1

Quick solution: http://tinysort.sjeiti.com/

Include that plugin, run a sort on your accordion content. eg. if its in a ul list:

$('ul>li').tsort();
//its sorted, trigger your accordion plugin here

Edit on more information

Ok so if you are not using a list, throw them into divs to isolate each section:

< div class="accordion" >
    <div class="section">
        < h3>Abc </h3 > 
        < p>Some text. </p > 
    </div>
    <div class="section">
        < h3>Cab </h3 > 
        < p>Some text. </p > 
    </div>
< /div >

Then sort by the h3 tag:

$('.accordion div.section').tsort('h3');
//then do your accordion code
Chris
  • 706
  • 1
  • 6
  • 12
  • I don use a list, I only use the < h3 > tag and < p > tag: like < h3 > ABC < /h3 > < p > Some text < /p> – Hurumhei Jul 04 '12 at 08:44
  • Thanks, what should the class "section" look like? – Hurumhei Jul 04 '12 at 09:33
  • Hi, I am not an experienced programmer and don't quite get how to use this. Could you please explain or give me a sample code to play with? – Hurumhei Jul 04 '12 at 13:54
  • You dont need to apply any CSS to the class "section", its just to identify it for the jquery call. `$('.accordion div.section')` targets all divs with a class of section that are children of anything with the class of 'accordion' – Chris Jul 05 '12 at 00:27
0

sort them before you create accordion is the easiest way

gaurang171
  • 9,032
  • 4
  • 28
  • 30