[jQuery] selected accordion background

[spiderling]

I'm using an accordion which functions perfectly. I was using jQuery
1.2.6 with UI 1.6 and was able to have a different background image
displayed when the section was expanded using .selected. I upgraded to
jQuery 1.3.2 with UI 1.7.2, and the selected / expanded background
image no longer works. Everything else works fine. Any suggestions on
how I can get it working again with 1.3.2 and 1.7.2?

Thanks
Pasquale

// jQuery
<script type="text/javascript">
$(document).ready(function(){
        $("#accordion1").accordion({
                active: false,
                header: '.heading',
                collapsible: true,
                autoHeight: false
        });
});
</script>


/** CSS **/
ul#accordion1 a.heading
{
        background: url(/pics/bg1.jpg) repeat-x #b9a77d;
        font-family: Georgia, "Times New Roman", Times, serif;
        color: #fff;
        display: block;
        outline: none;
        font-size: 13pt;
        font-weight: normal;
        line-height: 13pt;
        padding: 10px 5px;
        text-decoration: none;
}
ul#accordion1 a.heading:hover
{
        background: url(/pics/bg2.jpg) repeat-x #dfd2b3;
        color: #00447f;
}
ul#accordion1 a.selected, ul#accordion1 a.selected:hover
{
        background: url(/pics/bg3.jpg) repeat-x #00447f;
        color: #fff;
}


<!-- HTML -->
                        <ul id="accordion1">
                                <li>
                                        <a class="heading" href="#">Heading 
1</a>
                                        <ul>
                                                <li> <a href="link1.html">Link 
1</a></li>
                                                <li> <a href="link2.html">Link 
2</a></li>
                                                <li> <a href="link3.html">Link 
3</a></li>
                                        </ul>
                                </li>
                                <li>
                                        <a class="heading" href="#">Heading 
2</a>
                                        <ul>
                                                <li> <a href="link1.html">Link 
1</a></li>
                                                <li> <a href="link2.html">Link 
2</a></li>
                                                <li> <a href="link3.html">Link 
3</a></li>
                                        </ul>
                                </li>
                        </ul>