I don't like the default Accordion icons and I want to change them. This link here:

shows the option to change the header but it requires to specify icons. I don't need icons. I just need a simple (+) and (-)

How can I do that with accordions?

I don't like the default Accordion icons and I want to change them. This link here:

http://jqueryui./demos/accordion/#option-header

shows the option to change the header but it requires to specify icons. I don't need icons. I just need a simple (+) and (-)

How can I do that with accordions?

• javascript
• jquery

Share Improve this question Follow asked May 19, 2012 at 3:11 Tim TomTim Tom 2,16266 gold badges2727 silver badges3939 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Hiya working sample demo http://jsfiddle/zM5Vj/ or http://jsfiddle/zM5Vj/show/

Hope this helps, + will be shown when accordion is collapsed where as - in case of open accordion.

have a nice one!

Jquery code which adds + and - accordingly Rest full code is in fiddle, If you want I can copy paste the whole code. Please let me know how it goes!

$(function(){
 $('#accordion .fullChild>a.opener').text('+').addClass('box');

  $('#accordion .opener').click(function() {
  if($(this).text() == "-") {
  $(this).text("+");
  }
  else {
  $('#accordion .opener').text("+");
  $(this).text("-");
  }
});
});