CODEWITHSUNDEEP
javascriptjquery-uijquery-ui-accordion
MKoosej
MKoosej

Reputation: 3706

Repositioning the header icon of Jquery ui accordion

Is there and event or function I can override to change the way jquery ui adds the icons as a span element before the header. I want to have right after the header so the markup will look like:

<h3 class="ui-accordion-header">
     My Header Title
     <span class="ui-icon-triangle-1-e"></span>
</h3>

One way is to set the icons to false and add and manage my icons using the event triggers. I'm looking for a cleaner way to do that.

And btw I can't use something like float left and solve it using css.

Upvotes: 0

Views: 433

Answers (1)

cbayram
cbayram

Reputation: 2259

Looking through the source code, the library doesn't give you that configuration. Here is one thing you can do off the top of my head, just append the icon spans to the respective header:

$(function() {
  $( "#accordion" ).accordion();  
  // append header icons to their respective parent so they go at the end
  $(".ui-accordion-header").each(function(){
    $(this).find(".ui-accordion-header-icon").appendTo(this);
  })
});

Upvotes: 0

Related Questions