IE 6 JQuery toggle class bug! Help!

Question

While developing a new site I stop periodically and test all new functionality in IE6. It's a pain but we can't drop support yet.

I have hit a problem with JQuerys toogleClass function. I have a css styled <button> that toggles between a plus and a minus image when clicked. This works on all browsers expect IE6.

$('#searchForm #toggleButton').toggleClass('more');
$('#searchForm #toggleButton').toggleClass('less');
alert($('#toggleButton').attr('class')); <--- This displays 'less'

When first rendered the button displays the correct image. When clicked the image and all the css styles disappear. The class 'more' is removed but the class 'less' isn't applied. Placing an alert box to debug shows that JQuery thinks the 'less' class has been set properly but the browser hasn't applied it.

I have tried using different tags such as a <div> but the same problem persists.

Any help welcome

EDIT Added HTML and CSS

HTML

...
<div id="search-panel">
    <form action="/Search" class="search" id="searchForm" method="post"> 
    ...
        <div class="buttons">   
            <button type="submit" id="searchButton"></button>  
            <div class="loading"></div>  
            <button type="button" id="toggleButton" class="more"></button>
        </div>
    </form>
...
</div>
...

CSS

#search-panel .buttons #toggleButton.more { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat 0 -13px;  }
#search-panel .buttons #toggleButton.less { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat;  }

Answer 1

.toggleClass( className )

classNameOne or more class names (separated by spaces) to be toggled for each element in the matched set.

Source

Shouldn't you code be like this :

$('#toggleButton').toggleClass('more less');

Answer 2

IE6 doesn't understand chaining CSS like:

div.class1.class2

Change your CSS to:

#search-panel .buttons .more { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat 0 -13px;  }
#search-panel .buttons .less { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat; 

And this will work