query class toggle to change span background image not working

Ok, I know enough about jQuery to get some of my tasks accomplished (well except this one apparently).

The situation:

I have an accordion menu that has plus and minus images that are shown in the left hand side of the menu. I want them to change when the child table is visible.

there is some bug in my code that won't allow this to happen. it will change to the minus when you click one of the options and it will change to the plus when you click another option.

The Problem: Once an area is expanded the accordion class won't change if you click the visible option again to collapse the element.

Her开发者_高级运维e is a jsfiddle demo http://jsfiddle.net/mKUNs/

Here's a fixed version. But don't use it.

Your document is structured very badly. You've got tables with only one cell, and association between the header and the toggleable section is only by adjacency. You'd do better to change your markup so that each accordian is surrounded by a <div>/<section>.

Additionally, you're over using ids, and your CSS should all be taken out of the document. align="center" should not be used. Lastly, why muddle things by having a class for expanded and collapsed? The two are mutually exclusive, so just use one class!

This is how you should do it:

HTML

<div class='accordian'>
    <h3><span class='icon'></span>Option 1</h3>
    <div>
        the box should be black now, if you click this option
        again it should turn white
    </div>
</div>
<div class='accordian' id='weekly'>
    <h3><span class='icon'></span>Option 2</h3>
    <div>
        the box should be black now, if you click this option
        again it should turn white
    </div>
</div>

CSS:

.accordian h3 {
    background-color:#689937;
    color:#fff;
    height:30px;
}
.accordian .icon {
    background-color:#fff;
    background-size:25px;
    background-repeat: no-repeat;
    height:25px;
    width:25px;
    padding-left:5px;
    float:left;
}
.accordian.collapsed .icon {
    background-color:#000;
}

jQuery

$('.accordian').each(function() {
    var accordian = $(this);
    var header = accordian.find('h3');
    var content = accordian.find('div');

    header.click(function() {
        content.slideToggle('medium');
        accordian.toggleClass('collapsed');
    });

    content.hide();
    accordian.addClass('collapsed');
});