[Accordion] Wizard with interactive header colors

[Accordion] Wizard with interactive header colors

Hi,
I am modifying the accordion wizard plugin I found at http://jquery.bassistance.de/accordion/demo/.
The idea is to get the header's color to change with the navigation. I figured out a way to do it, but it is quite convoluted (see below).
I am trying to figure out a way to do it modifying a .CSS document (using addClass??) rather than modifying the style inline...
Any thoughts??? Thanks in advance!

THE CODE:

    jQuery().ready(function(){

    //Wizard plug-in for accordion:
        var wizard = $("#wizard").accordion({
            header: '.title',
            event: false
        });
   
    //The buttons to navigate the wizard (i.e. to open and close accordion).
    //Because I want the header's color to change, I had to make one button function for each button on the wizard... each button assigns a different color
    //There has to be a more elegant solution, but I can't figure it out. Ideally the code would be much more consolidated and it would make use of .CSS using addClass, etc.
    //That would allow me to introduce a class for the inactive headers, for the active headers and for the completed headers...
   
        var wizardButtons = $([]);
        $("div.title", wizard).each(function(index) {
            wizardButtons = wizardButtons.add($(this)
            .next()
            .children(":button")
            .filter(".next")
            .click(function() {
                wizard.accordion("activate", index + ($(this).is(".next") ? 1 : 1))
                $("#title").css("background-color","#CF9");
            }));
        });
       
       
        var wizardButtons2 = $([]);
        $("div.title", wizard).each(function(index) {
            wizardButtons2 = wizardButtons.add($(this)
            .next()
            .children(":button")
            .filter(".next2")
            .click(function() {
                wizard.accordion("activate", index + ($(this).is(".next2") ? 1: 1))
                $("#title2").css("background-color","#CF9");
            }));
        });
       
                            var wizardButtons2 = $([]);
                            $("div.title", wizard).each(function(index) {
                                wizardButtons2 = wizardButtons.add($(this)
                                .next()
                                .children(":button")
                                .filter(".previous2")
                                .click(function() {
                                    wizard.accordion("activate", index + ($(this).is(".next2") ? -1: -1))
                                    $("#title2,#title").css("background-color","#FC6");
                                }));
                            });
       
        var wizardButtons3 = $([]);
        $("div.title", wizard).each(function(index) {
            wizardButtons3 = wizardButtons.add($(this)
            .next()
            .children(":button")
            .filter(".next3")
            .click(function() {
                wizard.accordion("activate", index + ($(this).is(".next3") ? 1: 1))
                $("#title3").css("background-color","#CF9");
            }));
        });
       
                            var wizardButtons3 = $([]);
                            $("div.title", wizard).each(function(index) {
                                wizardButtons3 = wizardButtons.add($(this)
                                .next()
                                .children(":button")
                                .filter(".previous3")
                                .click(function() {
                                    wizard.accordion("activate", index + ($(this).is(".next3") ? -1: -1))
                                    $("#title3,#title2").css("background-color","#FC6");
                                }));
                            });
                           
        var wizardButtons = $([]);
        $("div.title", wizard).each(function(index) {
            wizardButtons = wizardButtons.add($(this)
            .next()
            .children(":button")
            .filter(".editar")
            .click(function() {
                wizard.accordion("activate", index + ($(this).is(".next") ? -1: -1))
                $("#title3").css("background-color","#FC6");
            }));
        });
       
        var accordions = jQuery('#wizard');
       
        jQuery('#remove').click(function() {
            accordions.accordion("destroy");
            wizardButtons.unbind("click");
        });
    });
   
    </script>

<body>



<div id="main">


        <div id="wizard">
       
            <div>
                <div class="title" id="title">Title 1</div>
                <div>
               
                    <h3> Content 1 </h3>
                       
                    <input align="baseline" type="button" class="next" id="tipo" value="next" />
                   
                </div>
               
            </div>
            <div>
       
                <div class="title" id="title2">Title 2</div>

                <div>
               
                    Content 2 <br/>
             
                    <input align="baseline" type="button" class="previous2" value="previous"/>

                    <input align="baseline" type="button" class="next2" value="next"/>
                   
                </div>
               
            </div>
            <div>
                <div class="title" id="title3">Title 3</div>
       
                <div>
                    <h3> Content 3 </h3> <br/><br/>
                   
                    <input type="button" class="previous3" value="previous"/>

                    <input type="button" class="next3" value="next"/>
                </div>
            </div>
           

        <div>
                <div class="title">Title 4</div>
       
                <div id="end">
                <br/>
               
                    <input type="submit" value="submit" />                  
                  
                    <br/><br/>
                     <input type="button" class="editar" value="Edit"/>
                  

                </div>
            </div>
       
        </div>
       
    </fieldset>
    </form>
   
</div>