CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-accordion
Mr A
Mr A

Reputation: 6778

Modifying J-Query UI Accordion

i am using jquery-ui accordion , what i actually want is to add numbers with the accordion programatically, as the accordion list comes from the cms system , therefore when the client adds the list the number should be automatically added , following is the [page][2] using accordion for faq , I want to show numbers after the arrow starting from 1. Any suggestions , assistance will be appreciated. Thanks

updated:

 $('#accordion').accordion({ header: 'h3', collapsible: true, active: false, autoHeight: false});

updated 2 (Solution):

 $("#accordion h3 a").each(function (index, elt) {
    index++;
    var tmp = $(this).text();
    $(this).html('<span class="num">' + index + '</span>' + tmp);

});

Upvotes: 0

Views: 181

Answers (1)

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

In fact, that's not really the accordion that you want to modify but the enumeration of your menu.

This can be done by adding programmatically the index to the header like this :

$("#accordion h3 a").each(function(index, elt) {
    index++;
    $(this).prepend(index + " ");   
});

You can have a look at this fiddle : http://jsfiddle.net/scaillerie/VNJwS/ .

Upvotes: 2

Related Questions