[jQuery] advanced toggle

[weezer007]

I'm not sure if toggle is the best way to approach this, but it is
what I am working with at the moment.

I am trying to create a dropdown tree that slide toggles open and
closed a div on click. An arrow image appears next to the click able
anchor that changes to point down when it is clicked. I created this
with the following code:

jQuery:

$(document).ready(function() {
            //hides spans on load
            $('div.subMenu').hide();
            //toggles the menu open and closed
            $('a.slideToggle').click(function() {
                $(this).parent().next().slideToggle(400);
                return false;
            });
            $("a.trigger").toggle(function() {
                $(this).parent().addClass("active");
            }, function() {
                $(this).parent().removeClass("active");
            });
        });

Some of the css:

div.level1
{
    background:transparent url(../imgs/jQuery_arrow_1_na.gif) no-
repeat scroll center left;
    width:100%;
    text-transform:lowercase;
    font-size:14px;
    font-weight:bold;
    padding:8px 0 8px 15px;
}
div.level1.active
{
    background:transparent url(../imgs/jQuery_arrow_1_a.gif) no-repeat
scroll center left;
}
div.level2
{
    background:transparent url(../imgs/jQuery_arrow_2_na.gif) no-
repeat scroll center left;
}
div.level2.active
{
    background:transparent url(../imgs/jQuery_arrow_2_a.gif) no-repeat
scroll center left;
}

HTML

<div id="sustainMenu">
    <div class='level1'>
          <a class='slideToggle level1 trigger'
href='#'>Environmental</a>
     </div>
                <div class='subMenu'>
                <div class='level2 subClass1Heading'>
                        <a class='slideToggle level2 subClass1Heading trigger'
href='#'>Page One</a>
                </div>
                <div class='subMenu'>
                        <div class='level4 subClass1Content'>
                                <a class='slideToggle level4 subClass1Content' 
href='#' >Section
one</a>
                        </div>
                        <div class='subMenu'>
                                <div id='content_993'>
                                        <div style='margin-bottom:11px;'>
                                                        Some Content
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</div>


My problem now is that I want a expand all and collapse all button. I
have created these, but they don't toggle the images. If I change the
images on click of the expand or hide all buttons, when toggle is
called again the images appear backwards from how they should. I have
tried a couple of other solutions, but they all become buggy when I
want both the images to change and expand/hide all buttons.

Any help would be amazing,

Chris