Adding arrow to accordion

Using David's answer here:

Accordion - add arrow to each nav item?

on my accordion here:

Error Help::Multiple controls with the same ID &#开发者_高级运维39;ctl00' were found. FindControl requires that controls have unique IDs

The arrows won't show..what's wrong?

I have taken a guess at how the accordion will work - here is some code that should work

jQuery:

function checkVisibility() {
  $('.accordionHeader.expanded').removeClass('expanded');
  $('.toggler .accordionContent:visible').each(function(){
    $(this).prev('.accordionHeader').addClass('expanded');
  });
}

$(document).ready(function(){
  checkVisibility();
  $('.toggler .accordionHeader').not('.expanded').click(checkVisibility());
});

css:

.toggler .accordionHeader {
  background:url(* add a path to an arrow here *) no-repeat left center transparent;
  }

.toggler .expanded {
      background-image:url(* add a path to alternate arrow here *);
    }

EDIT - Alternative

Here I have modified the script in the link you provided. Use the same css from the link provided (untested) - not what I have entered above. Previous option is better imo...

function checkVisibility(){
  $('.accordionHeader.expanded').removeClass('expanded');
  $('.accordionHeader > span').text('▶');
  $('.toggler .accordionContent:visible').each(function(){
    $(this).prev('.accordionHeader').addClass('expanded').find('span').text('▼');
  });
}

$(document).ready(function(){
    $('.accordionHeader').each(function(){
        $('<span></span>').appendTo($(this));
    });
  $('.toggler .accordionHeader').not('.expanded').click(checkVisibility());
});