How do I change accordion header with plus and minus symbol?

Question

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

http://jqueryui.com/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?

Answer 1

Hiya working sample demo http://jsfiddle.net/zM5Vj/ or http://jsfiddle.net/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("-");
  }
});
});